TD column width value does not work with fixed layout table

Question

I have the 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:

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

The problem is that all columns are displayed with equal width, even though I explicitly define each column width.

Why don't the widths above work? Any suggestion to do work with a fixed table layout?

Answer 1

The archaic width attribute does not accept one; it expects something like width="20" .

However, the “most correct” way to define a table is as follows:

 <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 whole table should be displayed, without having to calculate the widths based on individual cell styles.

Answer 2

You should use:

 <td width="20"> 

or

 <td style="width: 20px"> 

Answer 3

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

 <td style="width: 20px"> 

Answer 4

You must specify the width attribute without a px unit. There are probably some modern browsers that accept an attribute with units, but this is not the right way!

Do you have a similar problem in this https://stackoverflow.com/a/360960/ ::

Answer 5

Sounds like a job designed for me. check the script below.

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

http://jsfiddle.net/9x56E/

Answer 6

offer 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

Answer 7

Instead of putting the width on td, try adding it to th with 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 same problem and our resource was useful:

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