• 1

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?

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.


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


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

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

Here it is in JSFiddle

  • 0
Reply Report