Reputation: 6450
I want to display a table that has columns with different widths. I want each column of the table to hide the overflow text. I have tried a multitude of things, and nothing seems to give the desired output.
For example I want something like this.
|-Row 1-|-----------Row 2------------|---------Row 3 ----------|---Row 4 ---|
|Hello..|Here is some longer text t..|You get the idea | Blah Bla...|
I have tried the following in CSS...
.ex_table { table-layout:fixed }
.ex_table tr td{ overflow:hidden; text-overflow: ellipsis; white-space:nowrap; }
.ex_table .cell_1 { width:10%; }
.ex_table .cell_2 { width:40%; }
.ex_table .cell_3 { width:30%; }
.ex_table .cell_4 { width:20%; }
But the widths get ignored (presumably because of the fixed-width?) and the table is displayed where every column is the same width.
Problem Solved
The solution above actually works, but I had table headers in my table. You need to set the width of the headers rather than the cells!
Upvotes: 0
Views: 2274
Reputation: 21888
Add a width to the table CSS... You are essentially setting the cell width to a percentage of nothing
or auto
which is causing the issue. By adding a width to the table CSS, you provide the cell width a clear definition of size.
.ex_table { table-layout:fixed; width: 100%;}
.ex_table tr td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 5px;
border: 1px solid #aaa;}
.ex_table .cell_1 { width:10%; }
.ex_table .cell_2 { width:40%; }
.ex_table .cell_3 { width:30%; }
.ex_table .cell_4 { width:20%; }
jsFiddle demo (Only tested in Chrome)
Upvotes: 1
Reputation: 2475
maybe you need to add a fixed height? .ex_table tr td{ height: 20px; overflow:hidden; text-overflow: ellipsis; white-space:nowrap; }
Upvotes: 0