CODEWITHSUNDEEP
htmlcsscss-tables
James Fazio
James Fazio

Reputation: 6450

CSS Hide overflow text on a table with different width columns

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

Answers (2)

Scott
Scott

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

digitaldonkey
digitaldonkey

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

Related Questions