In the application I'm developing I have about 5 layers of nested lists. Each <li> contains a one row table. This makes it possible to display tabular data on a decreasing level of quantity. And it also makes it possible to have the table/rows hidden and appearing on clicking a parent row.
I would have preferred to have set up one table and use <tbody> tag to differentiate between levels, but that and the table-row-group is not supported by IE 7 or below so I had to come up the the above alternate solution. With one table I would have been more easily able to constrain the width of cells in columns, with all cells in a column having the same assigned width, but I have one-row tables and I'm trying to contrain the width of each cell and no matter what I've done I haven't gotten it to work.
I've tried simply setting the width within the html <td> tag, e.g. <td width="210">
I've tried setting the width with CSS, e.g.
Neither of these methods keep the width of the cell at one set width. If a longer text is put in that cell, even though the text is not as wide as the cell, it expands the width of it.
Anyone have an idea how I can handle this?