Misha Moroshko Misha Moroshko - 2 months ago 12
CSS Question

Set the table column width constant regardless of the amount of text in its cells?

In my table I set the width of the first cell in a column to be

100px
.

However, when the text in one of the cell in this column is too long, the width of the column becomes more than
100px
. How could I disable this expansion?

Answer

I played with it for a bit because I had trouble figuring it out.

You need to set the cell width (either th or td worked, I set both) AND set the table-layout to fixed. For some reason, the cell width seems to only stay fixed if the table width is set, too (i think that's silly but whatev). Also useful is setting the overflow property to hidden.

You should make sure to leave all of the bordering and sizing for CSS, too.

Ok so here's what I have.

html:

<table>
   <tr>
      <th>header 1</th>
      <th>header 234567895678657</th>
   </tr>
   <tr>
      <td>data asdfasdfasdfasdfasdf</td>
      <td>data 2</td>
   </tr>
</table>

CSS:

table{
    border: 1px solid black;
    table-layout: fixed;
    width: 200px;
}

th, td {
    border: 1px solid black;
    overflow: hidden;
    width: 100px;
}

Here it is in JSFiddle

This guy had a similar problem: Table cell widths - fixing width, wrapping/truncating long words

Comments