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

html css jsf facelets
usr-local-ΕΨΗΕΛΩΝ picture usr-local-ΕΨΗΕΛΩΝ · Apr 19, 2011 · Viewed 40.4k times · Source

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

Mark Kahn picture Mark Kahn · Apr 19, 2011 
table {
    table-layout : fixed;
}

Related questions

JSF/Facelets : CSS file is not being recognized using <h:outputStylesheet> tag

I'm working on a project using JSF/Facelets. I want to do some CSS changes on my View XHTML, but nothing happen when i deploy my web application in my Tomcat Server. I've tried many tricks but i've got the …

Read More
<h:inputText> enabled/disabled - change background color

can I change background color for disabled <h:inputText>? I've tried to do this way: <h:inputText value="test" disabled="true" styleClass="input"/> css contains: input:disabled {background-color:blue;} input:enabled {background-color:red;} and result is: …

Read More
How to horizontally center a <div>

How can I horizontally center a <div> within another <div> using CSS? <div id="outer"> <div id="inner">Foo foo</div> </div>

Read More