CSS Hide overflow text on a table with different width columns

Question

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!

score 1 · Answer 1 · answered Jul 11 '13 at 22:03

1

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)

answered Jul 11 '13 at 22:03

Scott

21,475
8
43
55

That seems to work great in the fiddle, but it doesn't work for my table, there must be some conflicting css styles the table is inheriting. – James Fazio Jul 11 '13 at 22:08
Figured out the problem, I had table headers in my table, and you need to set the widths of those instead! – James Fazio Jul 12 '13 at 16:04

score 0 · Answer 2 · answered Jul 11 '13 at 21:58

0

maybe you need to add a fixed height? .ex_table tr td{ height: 20px; overflow:hidden; text-overflow: ellipsis; white-space:nowrap; }

answered Jul 11 '13 at 21:58

digitaldonkey

2,431
1
20
16

Don't think the height has to do with it, tried this and it did not work. – James Fazio Jul 11 '13 at 22:15

CSS Hide overflow text on a table with different width columns

2 Answers2

Linked