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"?
Tables resize dynamically based on content. That's their nature. You could always read the "natural" column width of the table when it is rendered, then apply a style to lock in in that shape before you make you Ajax call.
When you say flex do you mean resize? Remember that if you are altering anything in the DOM and repainting its going to act similar to when it first rendered the item to the page. The best results I've seen with tables is clearing their container, building the table then appending it to the container.
If you are talking about columns resizing themselves because you haven't declared static widths via a class, style, or attribute - then the columns will resize themselves based on their content.
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.