8

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.

Explosion Pills
  • 188,624
  • 52
  • 326
  • 405
Hosea146
  • 7,412
  • 21
  • 60
  • 81

3 Answers3

6

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/

Explosion Pills
  • 188,624
  • 52
  • 326
  • 405
  • 6
    Width on is not supported in HTML5 (http://www.w3schools.com/tags/att_col_width.asp) – Hosea146 Mar 08 '13 at 00:39
  • 4
    @Hosea146 not the width *attribute*, but CSS width on the `` like in the example I linked you – Explosion Pills Mar 08 '13 at 00:44
  • Ok. Yes I see. Thank you. However, this is going to be very tedious. My table has about 10 columns, each of which will have a different fixed width. And, I have a couple tables I want to do this for. So, creating a CSS definition for each of this is going to be a pain. Is there another way? – Hosea146 Mar 08 '13 at 00:50
  • 3
    You can use the style attribute on `` as well. `` – Explosion Pills Mar 08 '13 at 00:53
6

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>
Blair Anderson
  • 19,463
  • 8
  • 77
  • 114
1

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

Community
  • 1
  • 1
FelipeAls
  • 21,711
  • 8
  • 54
  • 74