I have a table and I want to set a fixed width of 30px on the td's. the problem is that when the text in the td is too long, the td is stretched out wider than 30px. Overflow:hidden doesn't work either on the td's, I need some way of hiding the overflowing text and keeping the td width 30px.
<table cellpadding="0" cellspacing="0"> <tr> <td>first</td><td>second</td><td>third</td><td>forth</td> </tr> <tr> <td>first</td><td>this is really long</td><td>third</td><td>forth</td> </tr> </table> 8 Answers
It's not the prettiest CSS, but I got this to work:
table td { width: 30px; overflow: hidden; display: inline-block; white-space: nowrap; } Examples, with and without ellipses:
body { font-size: 12px; font-family: Tahoma, Helvetica, sans-serif; } table { border: 1px solid #555; border-width: 0 0 1px 1px; } table td { border: 1px solid #555; border-width: 1px 1px 0 0; } /* What you need: */ table td { width: 30px; overflow: hidden; display: inline-block; white-space: nowrap; } table.with-ellipsis td { text-overflow: ellipsis; }<table cellpadding="2" cellspacing="0"> <tr> <td>first</td><td>second</td><td>third</td><td>forth</td> </tr> <tr> <td>first</td><td>this is really long</td><td>third</td><td>forth</td> </tr> </table> <br /> <table cellpadding="2" cellspacing="0"> <tr> <td>first</td><td>second</td><td>third</td><td>forth</td> </tr> <tr> <td>first</td><td>this is really long</td><td>third</td><td>forth</td> </tr> </table>you also can try to use that:
table { table-layout:fixed; } table td { width: 30px; overflow: hidden; text-overflow: ellipsis; } It is not only the table cell which is growing, the table itself can grow, too. To avoid this you can assign a fixed width to the table which in return forces the cell width to be respected:
table { table-layout: fixed; width: 120px; /* Important */ } td { width: 30px; } (Using overflow: hidden and/or text-overflow: ellipsis is optional but highly recommended for a better visual experience)
So if your situation allows you to assign a fixed width to your table, this solution might be a better alternative to the other given answers (which do work with or without a fixed width)
1The above suggestions trashed the layout of my table so I ended up using:
td { min-width: 30px; max-width: 30px; overflow: hidden; } This is horrible to maintain but was easier than re-doing all the existing css for the site. Hope it helps someone else.
1This workaround worked for me...
<td> Put a div inside td and give following style width:50px;overflow: hidden; to the div
Jsfiddle link
<td> <div> <span>A long string more than 50px wide</span> </div> </td> Chrome 37. for non fixed table:
td { width: 30px; max-width: 30px; overflow: hidden; } first two important! else - its flow away!
Just divide the number of td to 100%. Example, you have 4 td's:
<html> <table> <tr> <td>This is a text</td> <td>This is some text, this is some text</td> <td>This is another text, this is another text</td> <td>This is the last text, this is the last text</td> </tr> </table> </html> We use 25% in each td to maximize the 100% space of the entire table
1
