CODEWITHSUNDEEP
htmlcss
Azeem
Azeem

Reputation: 2924

TD column width value not working with fixed table-layout

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?

Upvotes: 13

Views: 29360

Answers (7)

feshin
feshin

Reputation: 11

Instead of putting the width on the td, try adding it to the th using css.

For example,

HTML

<table>
    <tr>
        <th class="column-1">Heading 1</th>
        <th class="column-2">Heading 2</th>
        <th class="column-3">Heading 3</th>
    </tr>
    <tr>
        <td>TD 1</td>
        <td>TD 2</td>
        <td>TD 3</td>
    </tr>
</table>

CSS

.column-1 {
    width: 50%;
}
.column-2 {
    width: 25%;
}
.column-3 {
    width: 25%;
}

I had the exact same problem and found this resource helpful:

https://css-tricks.com/fixing-tables-long-strings/

Upvotes: 1

Anil Bhattarai100
Anil Bhattarai100

Reputation: 693

The width property does not support px for td, if you want to write the width in px, you need to provide css as below 

<td style="width: 20px">

Upvotes: 1

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324650

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.

Upvotes: 17

AndrewWhite
AndrewWhite

Reputation: 310

suggest such an option

HTML

<table class="tableStyle">
<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>
</table>

CSS

.tableStyle{
table-layout:fixed;
margin: 0 auto; width: 960px;
  background: #ddd;
}
td:nth-child(1n) {
  width: 20px;
  background: #876342;
}
td:nth-child(3n+1) {
  width: 100px;
}

demo

Upvotes: 0

Rafa Romero
Rafa Romero

Reputation: 2716

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:

Upvotes: 1

Anil Maharjan
Anil Maharjan

Reputation: 441

Seems like works as intended for me. please check the below fiddle.

.tableStyle{
table-layout:fixed;
margin: 0 auto; width: 960px;
}

http://jsfiddle.net/9x56E/

Upvotes: 0

Alex Char
Alex Char

Reputation: 33218

You have to use:

<td width="20">

or

<td style="width: 20px">

Upvotes: 12

Related Questions