Menu
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?
992
Using width attribute: The <td> tag has width attribute to control the width of a particular column. By assigning a numeric value to this attribute between 0 to 100 in terms of percentage(or you can use pixel format). We can restrict the column width up to that much percentage of the table's total width.
Select your table. On the Layout tab, in the Cell Size group, click AutoFit. Click Fixed Column Width.
The width attribute of <th> is not supported in HTML5. Use CSS instead. In our CSS tutorial you can find more details about the width property.
When table-layout: fixed is applied, the content no longer dictates the layout, but instead, the browser uses any defined widths from the table's first row to define column widths. If no widths are present on the first row, the column widths are divided equally across the table, regardless of content inside the cells.
You have to use:
<td width="20">
or
<td style="width: 20px">
The "archaic" width attribute does not take a unit, it expects something like width="20".
However, the "most correct" way to define a table is like so:
<table>
<colgroup>
<col style="width:20px" />
<col style="width:50px" span="2" />
<col style="width:15px" />
<col style="width:25px" />
<col style="width:20px" span="3" />
</colgroup>
<tbody>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
<td>col4</td>
<td>col5</td>
<td>col6</td>
<td>col7</td>
<td>col8</td>
</tr>
</tbody>
</table>
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.
31
You should the attribute width without the unit px. Probably there are some modern browsers that accept the attribute with the units, but is not the correct way!
You have a similar issue in this another Stackoverflow case:
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
