Question

I’m creating an app which allows the user to manipulate a table structure by adding and removing columns and rows, setting column widths and cell colspans, and inserting elements into table cells. While testing, I came across a scenario in which Firefox 4 and Internet Explorer 8 render the table in the way I expect it to be rendered and Google Chrome 11 doesn’t. I’m using table-layout: auto and I am aware that CSS does not specify a rendering algorithm to be used in this case (http://www.w3.org/TR/CSS21/tables.html, section 17.5.2.2). Nonetheless, I’d like to have consistent views in the three mentioned browsers, if possible.

Here’s a very simple scenario to illustrate the different rendering (try it in Chrome and Firefox/IE to see the difference): http://jsbin.com/ayuja4/3

Even though the table is wide enough to contain the blue div (because the first column is set to 200 px and the second column, although having a width of 100 px, must expand to 300 px to contain the green div), in Chrome the first column is widened beyond its 200 px. This results in extra, unnecessary space in the last row, which is precisely what I’m trying to avoid.

Any ideas to make this table look the same in Chrome as it does in Firefox and Internet Explorer? I don’t need a pure HTML/CSS approach – manipulating the table with JavaScript is a valid option, if it solves my problem. I’m already considering using fixed table layout, but this will result in extra effort to handle elements that are wider than columns, so it’s a last resort.

Answer 1

If you make the divs inside the table display as cells with table div {display:table-cell;} you’ll get the same results. Also, the way you’re going about it now is leaving a 1px gap because the 500px element doesn’t get the 1px border calculated into it.

I actually took a second look at it, and if you use min-width instead of width it’ll work that way too.