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

Question

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 break in long words then that's OK.

I cannot figure out any way of getting this to work.

This is for an internal client application so needs to work in IE6 and IE7 only.

An example page is below. The cell containing onereallylongword is the offending one.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
        td { width: 30px; }
    </style>
</head>
<body>
    <table border="2">
        <tr>
            <td>word</td>
            <td>two words</td>
            <td>onereallylongword</td>
        </tr>
    </table>
</body>
</html>

Essentially a duplicate of [http://stackoverflow.com/questions/416401/using-css-to-create-table-cells-of-a-specific-width-with-no-word-wrapping](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 `` contents in a `
` and applying the fixed width and overflow to that. — annakata, Jan 15 '09 at 13:08

score 38 · Answer 1 · answered Jan 15 '09 at 13:21

38

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">
<html xmlns="http://www.w3.org/1999/xhtml">
<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.

answered Jan 15 '09 at 13:21

inferis

1,303
1
9
15

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 Jan 15 '09 at 14:51
1

@RichardEv As far as I have checked with Chrome, the width the be specified for the table can be anything. So, you can just set it as `0`. – sawa Feb 21 '12 at 07:09
Instead of using `overflow: hidden` for `` I'm using `word-wrap: break-word`. Better when you don't want hide the overflow – instead Apr 26 '14 at 11:37
This shit works... Specially that table-layout:fixed. I had tried all the other stuff none seem to work. – Saras Arya Sep 30 '15 at 07:00

score 21 · Answer 2 · answered Apr 28 '11 at 07:07

21

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.

answered Apr 28 '11 at 07:07

Katie

371
4
4

Just brilliant. Worked like a charm after setting this. – NLV Jan 31 '12 at 12:52
2

Thank you!! Solved:80%; of my problems – Julian Mann Feb 28 '12 at 19:27
1

Please @stackoverflow, show this answer right on top. Perfect and simple solution. Just tinkered with the upper ones first and than realised this one. – Stephan Hoyer Jan 09 '17 at 12:31
This sln. is best as it allows to apply styling to the whole table and not only the content of a cell. – count0 Nov 12 '19 at 20:19

score 18 · Accepted Answer · edited Sep 30 '15 at 00:34

18

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.

edited Sep 30 '15 at 00:34

Nayuki

17,911
6
53
80

answered Jan 15 '09 at 13:05

Diodeus - James MacFarlane

112,730
33
157
176

4

auto overflow results in scrollbars being added - in my case it looks like I will be better off using overflow: hidden. – Richard Ev Jan 15 '09 at 14:50
3

`word-wrap: break-word` doesn't break up words? – Iulian Onofrei Jun 05 '14 at 10:57
1

It will on spaces, but not on long words that overflow. – Diodeus - James MacFarlane Jun 05 '14 at 12:57
4

@Diodeus what about "word-break: break-all;" – Mohd Abdul Mujib Mar 31 '15 at 01:38
Try white-space: nowrap; – msilveus Jun 10 '16 at 18:15
CSS Can break up words for you: https://stackoverflow.com/questions/1258416/word-wrap-in-an-html-table – Tropicalrambler Feb 13 '19 at 04:04

score 12 · Answer 4 · edited Jul 21 '12 at 12:43

12

Try this:

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

edited Jul 21 '12 at 12:43

Nikola K.

7,093
13
31
39

answered Jul 21 '12 at 12:32

Anupam

200
1
4

score 3 · Answer 5 · edited Jun 01 '15 at 13:50

3

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

edited Jun 01 '15 at 13:50

Michael Irigoyen

22,513
17
89
131

answered Jun 01 '15 at 12:14

Mukund Thakkar

1,225
14
19

score 2 · Answer 6 · answered Mar 18 '13 at 17:10

I realize you needed a solution for IE6/7 but I'm just throwing this out for anyone else.

If you can't use table-layout: fixed and you don't care about IE < 9 this works for all browsers.

td {
    overflow-x: hidden;
    overflow-y: hidden;
    white-space: nowrap;
    max-width: 30px;
}

score -7 · Answer 7 · edited Apr 28 '11 at 17:43

-7

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.

edited Apr 28 '11 at 17:43

kapa

77,694
21
158
175

answered Apr 14 '09 at 08:55

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 Apr 14 '09 at 09:27
2

I don't see how setting background-color to white could help here ? – dwarfy Apr 28 '11 at 08:35

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

7 Answers7

Linked