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

January 28, 2022

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 ?

>Solution :

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>