13

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?

Azeem
  • 2,904
  • 18
  • 54
  • 89

7 Answers7

17

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.

Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592
12

You have to use:

<td width="20">

or

<td style="width: 20px">
Alex Char
  • 32,879
  • 9
  • 49
  • 70
1

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">
Anil Bhattarai100
  • 693
  • 7
  • 32
1

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:

Community
  • 1
  • 1
Rafa Romero
  • 2,667
  • 5
  • 25
  • 51
0

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/

Anil Maharjan
  • 441
  • 4
  • 14
0

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

AndrewWhite
  • 310
  • 1
  • 8
0

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/

feshin
  • 1
  • 1