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 class="with-ellipsis" 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>