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?
Html – Set the table column width constant regardless of the amount of text in its cells
column-widthcsshtml
Related Topic
- Javascript – jQuery disable/enable submit button
- Html – How to overlay one div over another div
- Css – How to transition height: 0; to height: auto; using CSS
- Html – How to remove the space between inline/inline-block elements
- Html – How to make a placeholder for a ‘select’ box
- CSS text-overflow in a table cell
- Css – not:first-child selector
- Css – Font scaling based on width of container
Best Answer
I played with it for a bit because I had trouble figuring it out.
You need to set the cell width (either
th
ortd
worked, I set both) AND set thetable-layout
tofixed
. 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, it is useful to set the
overflow
property tohidden
to prevent any extra text from coming out of the table.You should make sure to leave all of the bordering and sizing for CSS, too.
Ok so here's what I have:
Here it is in JSFiddle
This guy had a similar problem: Table cell widths - fixing width, wrapping/truncating long words