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?

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.