Invalid column width

Question

I have a table with 3 columns where the third column is larger by 6 then the other columns.
Here is my example.
Why does the third column has the same size as the other?

Update:
I added another example where the table layout is fixed and the widths are ok.
Here is it.
Any idea why?

I need the header with the colspan but it makes the problem. I also need the table layout as fixed. Any idea how to workaround it?

The problem happens both in IE8 and Firefox.

Update:
I followed @Alex Hadley advice but this cause other problem.
I don't know why the long cell is not hidden: http://jsfiddle.net/9vcC2/32/

In what browser? I can see in Opera two small columns and third larger. — giker, Jan 30 '12 at 12:46
i think `table-layout: fixed` is playing the trick here. since it is fixed you table is ignoring the width given to individual td and takes its own calculated width as per fixed style is concerned. — Murtaza, Jan 30 '12 at 12:50
@Naor Note: I've replied to the new issue (which is not to do with my solution anyway) in the comments to my answer below. — Alex Hadley, Jan 30 '12 at 16:55

score 2 · Answer 1 · 2012-01-30T12:53:57.843

2

its due to table-layout: fixed; . Check it after removing it from css.

As Murtaza said : it is fixed. your table is ignoring the width given to individual td and takes its own calculated width as per fixed style is concerned

edited Jan 30 '12 at 12:53

answered Jan 30 '12 at 12:48

It's linked to you using a multi-spanning row as the first row, as I understand it. So it uses the values for the first row to calculate the column widths. (try swapping the two rows in the thead, for example). – Alex Hadley Jan 30 '12 at 12:58
1

@Naor see my comment - it's to do with the _first_ row's contents. – Alex Hadley Jan 30 '12 at 13:04
@Naor: first row with colspan gives all columns equal width. – Jan 30 '12 at 13:09
@Naor please see my answer below. Essentiall, add a `colspan` to the top of the `table`. – Alex Hadley Jan 30 '12 at 13:17

score 2 · Answer 2 · edited Jun 20 '20 at 09:12

2

Teez is absolutely correct that the problem is with the table-layout:fixed.

What this styling does, is makes the table take it's column widths from the first row that is encountered, then starts generating the contents based purely on this. So in your example the first row is a colspan=3 so it just gives all columns equal width. Try swapping the rows round in your first example to see the effect. This also explains why your second example does work.

More information can be seen here: http://www.w3.org/TR/CSS2/tables.html#fixed-table-layout

In the fixed table layout algorithm, the width of each column is determined as follows:

A column element with a value other than 'auto' for the 'width' property sets the width for that column.

Otherwise, a cell in the first row with a value other than 'auto' for the 'width' property determines the width for that column. If the cell spans more than one column, the width is divided over the columns.

Any remaining columns equally divide the remaining horizontal table space (minus borders or cell spacing).

[my bolding]

As a solution, you can add a <colgroup> as the first entry inside the <table> tag:

<colgroup> 
    <col style="width:50px;" /> 
    <col style="width:50px;" /> 
    <col style="width:300px;" /> 
</colgroup>

for example. As seen here.

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 30 '12 at 13:07

Alex Hadley

2,125
2
28
50

Since @Naor has never made the purpose of the problematic row clear, he could also add it using `` as I think this is most likely what it is. – My Head Hurts Jan 30 '12 at 13:25
@My Head Hurts: What Caption tag is?? – Naor Jan 30 '12 at 13:47
@Naor It is used to describe the nature of table. See [here](http://www.w3.org/TR/html4/struct/tables.html#h-11.2.2) – My Head Hurts Jan 30 '12 at 13:50
@Alex Hadley: This solve this problem but add another. Look at this - I don't know why the long cel is not hidden: http://jsfiddle.net/9vcC2/32/ – Naor Jan 30 '12 at 15:03
@Naor if this resolves this question can you mark is as answered. The follow up should probably be posted as a separate question. I'll have a look at your jsfiddle now. – Alex Hadley Jan 30 '12 at 15:06
ok, so see http://stackoverflow.com/questions/509711/why-does-overflowhidden-not-work-in-a-td. Basically, you need overflow:hidden;white-space: nowrap;width:0px in your table css. I've not tested this cross-browser though. – Alex Hadley Jan 30 '12 at 15:17
@Alex Hadley: I promise to mark your solution if I will use it. I am testing Martin suggestion. – Naor Jan 30 '12 at 15:22
@My Head Hurts: I used your suggestion with caption tad. Write an answer about it and get your points. – Naor Jan 31 '12 at 07:55
+1 for spotting the initial problem. You don't seem to have been given any credit for it. – My Head Hurts Jan 31 '12 at 09:43
@Alex Hadley: From me too. Thanks! – Naor Jan 31 '12 at 13:28

score 0 · Answer 3 · answered Jan 30 '12 at 12:47

This is because the colspan td sets the width first. It works if you declare the widths before the colspan:

<thead>
  <tr>
     <td style="width:50px;">FirstName</td>
     <td style="width:50px;">LastName</td>
     <td style="width:300px;">Address</td>
  </tr>
  <tr>
     <td colspan="3">text</td>
  </tr>
</thead>

You could use an invisible row for the widths:

<thead>
  <tr style="height:0px;">
     <td style="width:50px;"></td>
     <td style="width:50px;"></td>
     <td style="width:300px;"></td>
  </tr>
  <tr>
     <td colspan="3">text</td>
  </tr>
  <tr>
     <td>FirstName</td>
     <td>LastName</td>
     <td>Address</td>
  </tr>
</thead>

score 0 · Accepted Answer · answered Jan 31 '12 at 09:42

As noted by @AlexHadley, the problem is caused by the multiple td rows in your thead, which would require the use of colgroups to support the layout.

However, as it would seem that the initial tr in thead is actually being used to provided a description of the table, it would probably be more semantic to use the caption tag to assign a definition to the table.

On a mark up note, you should also be using th instead of td for the rows in the table header.

For more information about what is available within the table markup check out this this WDG reference.

Invalid column width

4 Answers4