Question

I’m having trouble making a HTML table behave. It’s a wide table, about 44 columns, and it’s OK if it stretches way off the user’s screen to the right (I want it to).

I’m trying to give each of my columns one of three widths by giving each table header one of three classes:

.c_th_small {
    width: 60px;
}
.c_th_medium {
    width: 100px;
}
.c_th_large {
    width: 500px;
}   

I put one of these three tags into my table header cells. But they only size my columns if I give my overall table a Width attribute. If I make my table really wide then these work, but they fight with the table width.

My question is, can I just tell each column how wide it should be and let that force the table to be as wide as it needs to be? I really don’t want to set a width for my table, I just want it to be as wide as all the columns put together. This works fine for smaller tables, but this big table seems to resist becoming wide enough.

Answer 1

It sounds like you need to use the CSS rule

table { table-layout: fixed; }

This tells browsers to use the widths of the cells of the first row to determine column widths, instead of also taking account the contents of ther cells.