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

Google Chrome (35.0.1916.153 m) 显示它时缺少右边框和底边框，如下面的快照所示。

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;
}