HTML5 - How can I specify a fixed width for a particular cell?

Question

In HTML5, how can I specify a fixed width for a table cell? Most of the <col> properties which were available in HTML4 are no longer valid in HTML5.

Just to be clear, I know I can do <td style="width:150px">, but this does not keep the column width fixed. No matter what the contents of the cell are, I want the width fixed at 150px.

Answer 1

Use colgroup

<table>
  <colgroup>
     <col span="1" style="width: 15%;">
     <col span="1" style="width: 70%;">
     <col span="1" style="width: 15%;">
  </colgroup>
  <thead></thead>
  <tbody></tbody>
</table>

Answer 2

Use the other table algorithm by adding table-layout: fixed:

• How to set the table column width constant regardless of the amount of text in its cells?
• previous answer of mine with demo (that was for div displayed as table but that's the same as table element displayed as default)

Answer 3

You can use width on col. Depending upon what you are doing it may also be helpful to use a fixed width child of the <td> to enforce its width as this does not work by setting the width of <td> alone due to its table-cell display type.

http://jsfiddle.net/ywSvr/