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!

Scott · Accepted Answer · 2013-07-11 22:03:13Z

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, 2013 at 22:03

Scott

21.9k8 gold badges45 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

James Fazio Over a year ago

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 Over a year ago

Figured out the problem, I had table headers in my table, and you need to set the widths of those instead!

digitaldonkey · Accepted Answer · 2013-07-11 21:58:07Z

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, 2013 at 21:58

digitaldonkey

2,4851 gold badge20 silver badges18 bronze badges

1 Comment

James Fazio Over a year ago

Don't think the height has to do with it, tried this and it did not work.

Collectives™ on Stack Overflow

CSS Hide overflow text on a table with different width columns

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related