I have following table structure:
<table class="tableStyle">
<tr>
<td width="20px">col1</td>
<td width="50px">col2</td>
<td width="50px">col3</td>
<td width="15px">col4</td>
<td width="25px">col5</td>
<td width="20px">col6</td>
<td width="20px">col7</td>
<td width="20px">col8</td>
</tr>
</table>
CSS class definition is:
.tableStyle{
table-layout:fixed;
margin: 0 auto; width: 960px;
}
The problem is that all columns are displaying with equal width despite the fact that i am explicitly defining each column width.
Why are above width values are not working? Any suggestion to make it work with fixed table layout?
Best Answer
The "archaic"
width
attribute does not take a unit, it expects something likewidth="20"
.However, the "most correct" way to define a table is like so:
This works especially well for large tables, because the browser only needs to read the
<colgroup>
element to know exactly how the entire table should be laid out, without needing to calculate widths based on individual cell styles.