Fluid table with td nowrap & text-overflow?

Question

Here is my problem HTML:

<table style="width:100%">
  <tr>
    <td style="width:100%;overflow:hidden">
      <div style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long
      </div>
    </td>
  </tr>
</table>

Here is what I wanted:

<div style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%">long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long
</div>

That is:

No horizontal scroll bars
div do not make the table and td so wide
resizing browser window makes the div dynamic change of ellipsis

btw, anyway to minic text-overflow on Firefox?

There's an alternative approach in this answer on [how to mix text-overflow and table cells using CSS](http://stackoverflow.com/questions/7569436/css-constrain-a-table-with-long-cell-contents-to-page-width). — Roman Starkov, Feb 28 '12 at 16:07

score 58 · Accepted Answer · answered May 09 '11 at 03:14

58

Edit: fixed this myself using CSS:

table { table-layout:fixed; width:100%; }

answered May 09 '11 at 03:14

est

11,429
14
70
118

1

I had the same width issue on my table's tds and table-layout:fixed solved it thanks . – katmanco Apr 13 '17 at 09:02

Mark · Answer 2 · 2014-09-23T19:39:26.313

26

Rather than using table-layout: fixed; for your table, you can use this trick to get a DIV to always take up the full space of a TD with text-overflow: ellipsis; functionality:

div { width: 0; min-width: 100%; }

The main trick is giving the width something other than auto/percent, and using a min-width of 100%;

div { width: 0; min-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.myTable { width: 100%; border-collapse: collapse; }
td { border: 1px solid #000; }

td.td1 { width: 100%; min-width: 50px; }
td.td2 { width: 100px; min-width: 100px; }
td.td3 { width: 150px; min-width: 150px; }

td.td4 { width: 50%; min-width: 50px; }
td.td5 { width: 50%; min-width: 50px; }
td.td6 { width: 150px; min-width: 150px; }

The table can be fluid sized or fixed width. Just give some min-widths for contents as needed.

<table class="myTable">
    <tr>
        <td class="td1"><div>Very very very long text Very very very long text Very very very long text Very very very long text</div></td>
        <td class="td2"><div>Content 2</div></td>
        <td class="td3"><div>Content 3 also so very lonnnnngggg</div></td>
    </tr>
</table>

<table class="myTable">
    <tr>
        <td class="td4"><div>Very very very long text Very very very long text Very very very long text Very very very long text</div></td>
        <td class="td5"><div>Content 2 has very very very many texts in a very very very long way</div></td>
        <td class="td6"><div>Content 3</div></td>
    </tr>
</table>

JSfiddle

edited Sep 23 '14 at 19:39

answered Sep 23 '14 at 16:34

Mark

1,564
1
14
22

1

Perfect - I'd argue none of the other questions meet the "fluid" requirement – Eric Feb 06 '15 at 12:27
This has been tested on Chrome, Firefox, Safari, and down to IE8. Not sure about earlier versions without some help there. iPad Safari works great, too. – Mark Feb 07 '15 at 16:11
2

This worked perfectly for me and feels more flexible than the `table-layout: fixed` solution (I don't like the constraint of having to set widths for each column). Thank you. – Andi Mar 19 '15 at 00:48
I know you're excited @momomo, but please try to keep your language under control. Think of Stack Overflow as more like Wikipedia than like Reddit. – Blue Aug 11 '16 at 17:37
@FrankerZ And we are all adults here. Using profane language is valid at times. It does impart anger and frustration much better than using a word like 'freaking'. I dream of a world were the internet is free from moderators and censorship. One day. But that's another topic. – mjs Aug 12 '16 at 03:08
Awesome, you're the champ – Quoc Van Tang Feb 21 '20 at 09:26

score 5 · Answer 3 · answered Dec 17 '12 at 20:03

My full example :

<head>
    <style>
        table {
            width:100%;
            table-layout:fixed;
        }
        td {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <table border="1">
        <tr>
            <td>CHAMPIONNAT</td>
            <td>CHAMPIONNAT</td>
            <td>CHAMPIONNAT</td>
            <td>CHAMPIONNAT</td>
            <td>CHAMPIONNAT</td>
            <td>CHAMPIONNAT</td>
        </tr>
    </table>
</body>

score 0 · Answer 4 · edited Dec 24 '12 at 06:48

0

for me,

<style type='text/css'>
table {
 white-space: normal;
}
</style>

worked...

edited Dec 24 '12 at 06:48

Jan Hančič

53,269
16
95
99

answered Dec 24 '12 at 06:27

Shoib Mohammed A

298
4
12

Fluid table with td nowrap & text-overflow?

4 Answers4

Linked