How to add ellipsis to table cells with dynamic width with only CSS?

Question

I've been searching SO for a while and haven't found a similar solution. I'm trying create a table in a web page that would have the following characteristics:

Table width = 100% always (no scroll is needed to see all columns; table takes all the available width)
Table cells are compacted (e.g.: no extra space is used unless necessary)
If cells are too wide, crop and use ellipsis.
All cells are 1 line height
I don't know how many columns will be shown (could be ~40) - which I believe rules out max-width for the cells?

One solution I saw in this question uses inner <table />s but playing with the suggested fiddle you can tell fields aren't compacted (see here).

EDIT: I'm using Knockout so my table structure goes as follows (Note I don't know how many columns are showing):

<table class="grid"> <thead> <tr data-bind="foreach: columns"> <th data-bind="text: name" /> </tr> </thead> <tbody data-bind="foreach: rows"> <tr data-bind="foreach: $data"> <td data-bind="text: $data" /> </tr> </tbody> </table

The current CSS (that doesn't work so anything is welcome):

.grid tr td { white-space: nowrap; overflow: hidden; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; }

EDIT 2: Adding a Fiddle

Ideas? Links? Dups?

"Dups?" That is your job to look for existing similar answers, not our job to mark yours as a duplicate. — zsaat14
– zsaat14, Commented Apr 1, 2014 at 20:01
Thanks. I'm well aware. Just couldn't find anything similar. — GilNahmias
– GilNahmias, Commented Apr 1, 2014 at 20:10
Try wrapping the cell contents in a div, and put the styles on it instead of the td. — bearfriend
– bearfriend, Commented Apr 1, 2014 at 20:12
table-layout: fixed will violate requirement #2 - the cells won't be compacted if they don't have to take all the space — GilNahmias
– GilNahmias, Commented Apr 1, 2014 at 20:36

Kuzeko · Accepted Answer · 2016-05-24 13:09:51Z

0

You can force the table width with table-layout:fixed; In this way it is forced to have the specified width or max-width.

If I understood correctly your requirement http://jsfiddle.net/3vLdq8pe/5/ (note the frame div is just to show the limit in smaller size)

answered May 24, 2016 at 13:09

Kuzeko

1,71518 silver badges41 bronze badges

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

1 Comment

Dave Munger Over a year ago

The title says "with dynamic width." This explicitly disables dynamic width and forces all columns to equal width by default. Then you have to manually pixel-nudge by putting an explicit width on every column in your entire app.

Collectives™ on Stack Overflow

How to add ellipsis to table cells with dynamic width with only CSS?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related