Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

TD column width value not working with fixed table-layout

Tags:

html

css

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?

like image 992
Azeem Avatar asked May 26 '14 13:05

Azeem


People also ask

How do you set the fixed width of a TD table?

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.

How do you fix a fixed column width?

Select your table. On the Layout tab, in the Cell Size group, click AutoFit. Click Fixed Column Width.

Why is th width not working?

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.

What will happen if we set the value of table-layout property of a fixed?

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.


3 Answers

You have to use:

<td width="20">

or

<td style="width: 20px">
like image 60
Alex Char Avatar answered Oct 31 '22 17:10

Alex Char


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.

like image 31
Niet the Dark Absol Avatar answered Oct 31 '22 18:10

Niet the Dark Absol


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:

like image 40
Rafa Romero Avatar answered Oct 31 '22 18:10

Rafa Romero