HTML表格边框和文本溢出

Question

我正在使用一些CSS显示HTML表格，如下所示。

<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）正确显示如下。

谷歌浏览器（35.0.1916.153米）显示缺少右边和右边边框，如下图所示。

Internet Explorer（8）显示此表没有任何边框，如下所示。

此表格是否可以显示所有边框以及text-overflow:ellipsis，这对于FireFox显示是重要的，可以在相应的快照中看到？

Answer 1

通过将溢出和边界规则移动到单元格而不是整个表格，您可以获得所需的效果。试试这个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;
}