overflow in html table

Question

I want to make a table with two columns. The first one with a text caption and second one with a link. If the link is bigger than available space than I want to overflow with "...". This is what I've tried:

<html>

<style>
    table {
        width: 100px;
        border: dotted;
    }

    td {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
</style>

<body>
    <table>
        <tr>
            <td colspan=2>
                First name and last name
            </td>
        </tr>
        <tr>
            <td>
                Info:
            </td>
            <td>
                <a href="google.pl">CLICKKKKKKKKKKKKKKXX</a>
            </td>
        </tr>
    </table>
</body>
</html>

but it doesn't overflow and table gets bigger than 100px. I've tried adding max-width to tr{} but it also doesn't work.

What is the solution for that?

check this : http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow if you change the div in a or span, it doesnt work as ellipsis — singe batteur, Jul 16 '16 at 13:47
Yes, I know that but can it be done another way with ``? Or can it be done with JavaScript? — Krzysztof Majewski, Jul 16 '16 at 13:49
put your a into a div container ? or give it 'display:inline-block' — singe batteur, Jul 16 '16 at 13:49
@singebatteur but total table width will get bigger than 100px anyway... — Krzysztof Majewski, Jul 16 '16 at 13:52
Try putting the overflow on the a tag and give it display block I can't try these now as off to bed. — Carol McKay, Jul 16 '16 at 13:54
No. First row has one caption with colspan=2 and second row has two columns, "info" and a link — Krzysztof Majewski, Jul 16 '16 at 13:58
http://stackoverflow.com/questions/9789723/css-text-overflow-in-a-table-cell?rq=1 did you check this ? — singe batteur, Jul 16 '16 at 14:05

score 2 · Accepted Answer · answered Jul 16 '16 at 14:07

2

Try this

table{table-layout:fixed;}

answered Jul 16 '16 at 14:07

Head In Cloud

2,001
1
8
10

yes but beware, table-layout fixed can cause it's own problems. – Carol McKay Jul 18 '16 at 03:17

Hari Harker · Answer 2 · 2016-07-16T14:27:48.353

2

You want the overflowing text to be wrapped with ... but you haven't mentioned the threshold max-width value to trigger overflow and replace the remaining text with ...

Try this :

td
{
  width: 50px;
  max-width: 75px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Working Example : JsFiddle

edited Jul 16 '16 at 14:27

answered Jul 16 '16 at 14:16

Hari Harker

702
1
12
29

nice one! @HariHarker – Carol McKay Jul 18 '16 at 03:18

overflow in html table

2 Answers2