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, Apr 01 '14 at 20:01
Thanks. I'm well aware. Just couldn't find anything similar. — GilNahmias, Apr 01 '14 at 20:10
Try wrapping the cell contents in a div, and put the styles on it instead of the td. — bearfriend, Apr 01 '14 at 20:12
Thanks @dg988, tried - but I get the same result: Either the cell ignores the ellipsis or when I add `max-width`, the table ends up wider than `100%`. — GilNahmias, Apr 01 '14 at 20:18
`table-layout: fixed` will violate requirement #2 - the cells won't be compacted if they don't _have_ to take all the space — GilNahmias, Apr 01 '14 at 20:36

score 0 · Accepted Answer · answered May 24 '16 at 13:09

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 '16 at 13:09

Kuzeko

1,545
16
39

1

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. – Dave Munger Oct 30 '20 at 15:49

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

1 Answers1