ansaurus

Question

Table cell widths - fixing width, wrapping/truncating long words

Answer 1

A:

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

Diodeus 2009-01-15 13:05:27

auto overflow results in scrollbars being added - in my case it looks like I will be better off using overflow: hidden.

Richard Ev 2009-01-15 14:50:19

Answer 2

+1 A:

Essentially a duplicate of http://stackoverflow.com/questions/416401/using-css-to-create-table-cells-of-a-specific-width-with-no-word-wrapping

Sadly, the best answer I'm aware of is wrapping the <td> contents in a <div> and applying the fixed width and overflow to that.

annakata 2009-01-15 13:08:07

Answer 3

+5 A:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
    <style type="text/css">
        td { width: 30px; overflow: hidden; }
        table { width : 90px; table-layout: fixed; }
    </style>
</head>
<body>

    <table border="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.

inferis 2009-01-15 13:21:52

That works well - however in my scenario the number of columns is variable and it will be complex for me to calculate the total width of the table.

Richard Ev 2009-01-15 14:51:44

This also works with percentage widths...

inferis 2009-01-16 12:31:26

Answer 4

A:

try td {background-color:white}

It just worked for a column I didn't want to get trampled by a previous column's long text.

d.

damion 2009-04-14 08:55:54

I'm not sure that would work - the previous column's long text will surely cause the width of that column to expand.Could you edit your reply to contain an example HTML snipped to illustrate?

Richard Ev 2009-04-14 09:27:20

Answer 5

A:

Thank you all for your answers. I used the overflow:hidden in my DIV tags and it worked like a charm! Love it. Thanks again.

Dinosaur 2010-03-18 15:55:43

ansaurus

tags:

views:

answers:

Table cell widths - fixing width, wrapping/truncating long words

related questions