Question

I have some tabular data with some functionality to ‘view details’ that fires off an ajax call to append a few new elements to the DOM (usually I insert another TR just after the selected row and innerHTML or append inside a TD with a colspan.

My question is this, in IE6/7 my columns flex. Currently I don’t have a ‘static’ width per column and wanted to avoid this if possible.

Any suggestions to avoid this ‘flex’?

Answer 1

This trick here is using the somewhat esoteric table-layout:fixed rule

Use it like this:

table {table-layout:fixed} 

You also ought to specify explicit column widths for the <td>s.

The table-layout:fixed rule says ‘The cell widths of this table depend on what I say, not on the actual content in the cells’. This is useful normally because the browser can begin displaying the table after it has received the first <tr>. Otherwise, the browser has to receive the entire table before it can compute the column widths. However, it is also useful in your case to maintain absolute column widths.