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.

Vanover

Interesting question. I think there is no CSS way to do this, though. – Dees

Answer 1

table {
    table-layout : fixed;
}

Dieldrin

How about remaining columns? First couple fixed next four distribute evenly. – Razzledazzle

Answer 2

If you have at least an idea regarding the maximum number of columns: here's the solution for applying certain distributions only if a certain amount of columns is given.

My example only concentrates on the principle and creates evenly distributed columns. Note that this is superfluid when using table-layout:fixed and width:100%.

You could easily extend this solution to specify the width of the first columns other than that of the remaining columns.

Say, the maximum allowed number of columns is 4 (including possible rowheaders). Given you are using tbody in your table like in the following example:

<table>
   <thead>
      <tr><th>X</th><th>A</th><th>B</th><th>C</th></tr>
   </thead>
   <tbody>
      <tr><th>1.</th><td>a</td><td>b</td><td>c</td></tr>
      [...]
   </tbody>
</table>

CSS Code:

table{table-layout:fixed;width:100%;}
tbody>tr>*:nth-last-child(2)~*{ width:50%}
tbody>tr>*:nth-last-child(3)~*{ width:33.3%}
tbody>tr>*:nth-last-child(4)~*{ width:25%}

It says: Apply to the following siblings of the second last element of a row: width 50%. (That's all columns except the first element, if there are at least 2 columns). If there are two, three, four or more columns, this selector is applied.

But then:

Apply to the following siblings of the third last element of a row: width 33.3%: Again: This selector works only if there are at least three elements. It overwrites the rules of the preceding selector (nth-last-child(2)), so that your columns now have the width 33.3%. This selector is not applied, if there are only two columns.

And then: The same for four columns. It again overwrites the rules previously defined.

Be aware, that you need to define the width for each possible amount of columns. So, if there was a maximum number of 20 allowed columns, this would be 21 lines of css.

I believe that this solution is compatible with IE9+, not IE8. But I'm currently not 100% sure. See http://caniuse.com/css-sel3

Dispensatory