HTML table border and text overflow

Question

I'm displaying an HTML table using some CSS as follows.

<style type="text/css">
    .style-class {
        table-layout: fixed;
        width: 20%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow:ellipsis;
        border: 1px;
    }
</style>

<table rules="all" class="style-class">
    <tr>
        <td>a</td>
        <td>Text overflow ellipsis demo.</td>
    </tr>

    <tr>
        <td>b</td>
        <td>Text overflow ellipsis demo.</td>
    </tr>
</table>

Mozilla FireFox (29.0.1) displays it correctly as follows.

Google Chrome (35.0.1916.153 m) displays it with missing right and bottom borders as can be seen in the following snap shot.

Internet Explorer (8) displays this table with no borders at all as follows.

Can this table be displayed with all borders along with text-overflow:ellipsis which is important as displayed by FireFox as can be seen in the respective snap shot?

Answer 1

By moving the overflow and border rules to cells rather than the whole table, you can get the effect you need. Try this CSS:

.style-class {
    table-layout: fixed;
    width: 20%;
    border-collapse: collapse;
    border: 1px solid #000;
}
.style-class td {
    border: 1px solid #000;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}