Table-layout: fixed column width issue

Question

We use the CSS table-layout: fixed property for our mobile application. (I don’t remember the whole reason, but I believe that this is due to the possibility of transferring some words) ...

I ran into a problem when we need to define one of two columns from two columns of a table. It doesn't matter, usually we do this:

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

It works great.

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

 <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 two columns are tied to 50% of the width. Here I have a jsbin example:

http://jsbin.com/ejovut/3

Is this normal behavior? Chrome error? A way around this problem?

Answer 1

It's not a mistake. table-layout:fixed means that the browser is allowed to optimize the calculation of the table layout, assuming that only the characteristics of the first row and column are important. In particular, it does NOT need to check and perform layout calculations in the later table contents, which can significantly affect layout performance.

The correct solution is to use the <col> and <colgroup> to explicitly indicate the width of the columns, and not to use the first row.

Answer 2

the first row of the table should contain everything. In addition, Chrome errors do not allow to use for this.