Table Cell Widths - Fixing Width, Wrapping/truncating Long Words

August 31, 2023 Post a Comment

I have a table containing cells with text of various lengths. It is essential that all of the table cells are of the same width. If this means truncating long words or forcing a br

Solution 1:

As long as you fix the width of the table itself and set the table-layout property, this is pretty simple :

<!DOCTYPE htmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><styletype="text/css">td { width: 30px; overflow: hidden; }
        table { width : 90px; table-layout: fixed; }
    </style></head><body><tableborder="2"><tr><td>word</td><td>two words</td><td>onereallylongword</td></tr></table></body></html>

I've tested this in IE6 and 7 and it seems to work fine.

Solution 2:

If you want to the long text wrapped properly in new lines then in your table id call use a css property table-layout:fixed; otherwise simply css can't break the long text in new lines.

Solution 3:

Stack Overflow has solved a similar problem with long lines of code by using a DIV and having overflow-x:auto. CSS can't break up words for you.

Solution 4:

Try this:

text-overflow: ellipsis; 
overflow: hidden; 
white-space:nowrap;

Solution 5:

<styletype="text/css">td { word-wrap: break-word;max-width:50px; }            
</style>

Html5 Library