I am creating an application that allows the user to manipulate the structure of a table by adding and removing columns and rows, setting the width of the columns and colspans of the cells, and inserting elements into the cells of the table. During testing, I came across a scenario in which Firefox 4 and Internet Explorer 8 render a table the way I expect it to display, but Google Chrome 11 doesn’t. I use table-layout: auto, and I know that CSS does not specify the rendering algorithm that will be used in this case (http://www.w3.org/TR/CSS21/tables.html, section 17.5.2.2). However, I would like to have consistent views in the three browsers mentioned, if possible.
Here is a very simple script to illustrate different rendering (try to see the difference in Chrome and Firefox / IE): http://jsbin.com/ayuja4/3
Despite the fact that the table is wide enough to contain a blue div (because the first column is set to 200 px, and the second column, although it is 100 px wide, must expand to 300 px to contain a green div) in Chrome, the first column is expanded for 200 pixels. This leads to unnecessary, unnecessary space in the last line, which I am trying to avoid.
Any ideas to make this table look the same in Chrome, like in Firefox and Internet Explorer? I don't need a clean HTML / CSS approach - manipulating a table using JavaScript is a valid option if it solves my problem. I am already considering using a fixed table, but this will lead to additional efforts to handle elements that are wider than columns, so this is a last resort.
source
share