CSS: Set a maximum width on a table
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;
}
Clément
PhD Student at MIT CSAIL. Author of Create Synchronicity, YìXué Dictionary, and company-coq.
Updated on May 19, 2020Comments
-
Clément about 4 years
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, andwhite-space: normal; word-break: break-all;
on the last. Also, the table haswidth: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 settingmax-width
on the table, and wrapping it in adiv
, to no avail.See http://jsfiddle.net/GQsFx/6/ for a real-life example =) How can I make Firefox behave like Chrome?
-
Clément over 12 yearsYou'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 over 12 yearsThat doesn't change anything :/
-
Frederick Marcoux over 12 yearsOhh crap! I don't know why, sorry!
-
Clément about 12 yearsI 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 about 12 yearsThis 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.
-
Anish Gupta about 12 yearsThat is not what the OP asked for.
-
Clément about 12 yearsRight, 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...
-
ubershmekel over 10 yearsThe 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;}