CSS: Set a maximum width on a table

Question

I'm generating application logs in html, and I've stumbled across a rather annoying problem. I have the following layout :

| Action | Result | File path           |

For example

| Copy | Success | C:\VeryVeryVeryLongF |
|      |         | ileName.txt          |

Columns 1 and 2 only display short labels : their contents should stay on one single line. On the other hand, column 3 may contain very long file paths, which should span multiple line if they can't fit on a single line.

To achieve this, I've used white-space: nowrap; on the first columns, and white-space: normal; word-break: break-all; on the last. Also, the table has width:100%.

This works great in Chrome and IE, but not in Firefox : In short, I can't seem to find a way to tell Firefox 8.0 to not enlarge the last column of the table, and instead let the text span multiple lines. In my previous example, Firefox prints

| Copy | Success | C:\VeryVeryVeryLongFileName.txt |

The text in the first two columns may vary, so I can't set their width manually and use table-layout: fixed. I've also tried setting max-width on the table, and wrapping it in a div, to no avail.

See http://jsfiddle.net/GQsFx/6/ for a real-life example =) How can I make Firefox behave like Chrome?

Related: http://stackoverflow.com/questions/1258416/word-wrap-in-a-html-table , http://stackoverflow.com/questions/138132/using-css-how-can-i-split-a-string-e-g-a-long-url-in-a-table-cell — Clément, Dec 13 '11 at 11:27
Well, now that we're up to FireFox22, it looks like your jsfiddle displays fine. — Gerrat, Jul 31 '13 at 14:20

score 9 · Answer 1 · answered Mar 05 '12 at 21:22

9

Will this work? This appears to work with the jsfiddle. Percentage based first two cols, then width auto the third, with table-layout: fixed on the table.

http://jsfiddle.net/keithwyland/uuF9k/1/

.actions {
  width:100%;
  table-layout: fixed;
}

.actions tr td {
  white-space: nowrap;
  width: 15%;
}

.actions tr td:nth-child(3) {
  white-space: normal;   
  word-break: break-all;
  word-wrap: break-word;
  width: auto;
}

answered Mar 05 '12 at 21:22

keithwyland

2,998
1
17
22

2

Right, but I don't want to set the width of the columns... And percentages don't work well with window scaling (15% of half a 800px screen is really not much). What I need is a size calculated based on the contents... – Clément Mar 06 '12 at 20:01
4

The only way I've found to avoid the table being too large was with `table {table-layout: fixed;}` or with td limiting e.g. `td { max-width: 100px; text-overflow: ellipsis; overflow: hidden;}` – ubershmekel Jan 06 '14 at 23:13

score 0 · Answer 2 · answered Dec 14 '11 at 16:14

0

use this css

.actions {
width:100%;
}
.actions tr td:nth-child(3) {
 width:200px;
 word-wrap:break-word;
  display:inline-block;
}

answered Dec 14 '11 at 16:14

pravin

231
1
6

1

You're using a fixed size for the third column, which doesn't do what I need: I need the third column to be as wide as possible. – Clément Dec 15 '11 at 17:48

score -1 · Answer 3 · answered Feb 07 '12 at 13:27

-1

max-width is valid CSS2 but only supported in NS7, Opera 7 and probably Mozilla. I don't believe it's supported in IE 6.

answered Feb 07 '12 at 13:27

Aditya Kumar

9
1
3

2

That is not what the OP asked for. – Anish Gupta Mar 05 '12 at 21:33

score -1 · Answer 4 · answered Feb 09 '12 at 02:24

-1

Try putting width: auto;. This will tell to the browser to use the needed space...

answered Feb 09 '12 at 02:24

Frederick Marcoux

2,195
1
26
57

That doesn't change anything :/ – Clément Feb 12 '12 at 16:36
Ohh crap! I don't know why, sorry! – Frederick Marcoux Feb 12 '12 at 18:02

score -1 · Answer 5 · answered Mar 01 '12 at 05:36

-1

this should work:

    .actions tr td:nth-child(3) {
         white-space: normal;
         word-break: break-all;
         max-width:200px;
     }

answered Mar 01 '12 at 05:36

Mike Lin

370
1
9

I don't want to specify a maximum width for the third column, since the webpage might be viewed on a wide range of monitors... – Clément Mar 03 '12 at 23:18

score -1 · Answer 6 · answered Mar 01 '12 at 15:49

-1

The following CSS seems to get it to work for me. Note the addition of table-layout:fixed, and the use of word-wrap: break-word.

.actions {
    width:100%;
    table-layout:fixed;
}

.actions tr td {
    white-space: nowrap;
}

.actions tr td:nth-child(3) {
    white-space:normal;
    word-wrap: break-word;
}

answered Mar 01 '12 at 15:49

Sheldon Griffin

4,405
1
14
5

This is not optimal: all colums end up taking the same space, while the two first ones could be shrunk without breaking their content, giving more space for the last one. – Clément Mar 03 '12 at 23:19

CSS: Set a maximum width on a table

6 Answers6