How to equally distribute columns width in HTML table when the number of them is unknown?

Question

I am working with JSF/ICEFaces and I need to generate a table from a dynamic tree structure with an unknown (at run-time) number of rows and columns. The table must have width: 100%; so it occupies all the space inside its container.

I am able to generate all the markup required for the table, but I found that the cells' width is not the same.

It would be easy for me to set CSS width: (100/numberOfColumns)% if I knew the number of elements I'm rendering. Unfortunately, I can't modify the classes returned by my backing bean so I can only iterate over them with ui:repeater component.

Do you know if there is a CSS way to make sure that all columns in a table have the same width, no matter what it is?

I wouldn't like to use the Javascript way. Just as cleaner code as possible.

Answer 1

table {     table-layout : fixed; }