How can i have elispsis on my table cell without using max-width?

Question

I have the following table


    <table>
        <tr>
            <td>Long name name name name name name</td>
        </tr>
        <tr>
            <td>Some shorter</td>
        </tr>
    </table>

and my css

table {
    border: 1px solid black;
}

td {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

i needed to have elipsis on my table so that is why i used max-width: 100px; together with white-space: nowrap;

But the problem here is that i need my td to have fixed with

td {
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

if i do this than my td has fixed width but i lose the elipsis. Is there some way with which i can do this ?

I have long names so i can't show full name in tables - i show elipsis and on hover the full name... — sparrow123, Jan 28 '22 at 07:28
Does this answer your question? [CSS text-overflow in a table cell?](https://stackoverflow.com/questions/9789723/css-text-overflow-in-a-table-cell) — Peter B, Jan 28 '22 at 07:30

score 0 · Answer 1 · answered Jan 28 '22 at 07:33

Use table-layout:fixed;

table {
    border: 1px solid black;
    width:100%;
    table-layout:fixed;
}

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

    <table>
        <tr>
            <td>Long name name name name name name Long name name name name name name Long name name name name name name Long name name name name name name Long name name name name name name</td>
        </tr>
        <tr>
            <td>Some shorter</td>
        </tr>
    </table>

score 0 · Answer 2 · answered Jan 28 '22 at 07:50

0

You can achieve this using -webkit-line-clamp. You can read more about the prerequisites here

table {
  border: 1px solid black;
}

td {
  max-width: 100px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

<table>
  <tr>
    <td>Long name name name name name name</td>
  </tr>
  <tr>
    <td>Some shorter</td>
  </tr>
</table>

answered Jan 28 '22 at 07:50

Gerard

15,418
5
30
52

Thank you for the comment.Is there some other more generiw way ? – sparrow123 Jan 28 '22 at 07:55

How can i have elispsis on my table cell without using max-width?

2 Answers2