table-layout: fixed issue with column widths

Question

We're using the CSS table-layout: fixed property for our mobile app. (I don't recall the full reason, but I believe it had to do with enabling word wrapping of some sorts)...

I've run into an issue where we need to size one of the two columns of the two column table. Not a big deal, usually we do this:

<table>
  <tbody>        
    <tr>
      <th width="20%">hello world</th>
      <td>hello world</td>
    </tr>
  </tbody>
</table>

That works fine.

However, if we need to create a row that spans both columns BEFORE this one:

<table>
  <tbody>   
    <tr>
      <td colspan="2">hello world</th>
    </tr>     
    <tr>
      <th width="20%">hello world</th>
      <td>hello world</td>
    </tr>
  </tbody>
</table>

What happens, at least in Chrome, is that the two columns snap to 50% widths. I have a jsbin sample here:

http://jsbin.com/ejovut/3

Is this normal behavior? A Chrome bug? A way to work around this issue?

Vesicle

Answer 1

This is not a bug. table-layout:fixed means that the browser is allowed to optimize table-layout computations by assuming only the first row and column specifications matter. In particular, it does NOT need to inspect and do layout computations on later table content, which can make a large difference in layout performance.

The right solution is to use the <col> and <colgroup> elements to explicitly specify column widths, rather than using the first row.

Mesolithic

Sorry to appear dense, but is the solution to not use table-layout:fixed? Or to use col and colgroup in addition to table-layout:fixed if this fixed "word wrapping"? (TBH I don't know why table-layout would be used at all in this example and simply removing it would solve the problem? – Pious

table-layout: fixed can be necessary for breaking long words (see jsbin.com/utifiy/2/edit). In general, if you need precise layout control, the fixed value gives you that whereas the default does more magic: but you need to replace that magic sizing with something - so that's why you need to either explicitly size the first row or col element specifications. The OP's problem was that if the first row has cells that span columns, you cannot declare the size of the columns on the cells, so the solution is to use col-based sizing. – Mesolithic

Answer 2

first table row should contain all also, Chrome bugs does not allow to use for this.

Dielu

So, this is a known Chrome bug and the workaround is to make sure there is a blank first row that contains each individual TD? – Vesicle

yes, with specified "width", it is not only for Chrome, but also for FF and IE, although IE and FF allows to specify 'width" of each cell with <col> tags – Dielu

"Chrome bugs not allows to use for this" - which bugs exactly? – Detail