HTML表格边框和文本溢出答案

【问题标题】：HTML table border and text overflowHTML表格边框和文本溢出
【发布时间】：2014-08-05 12:52:05
【问题描述】：

我正在使用一些 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 显示的重要性？

【问题讨论】：

标签： html css border html-table

【解决方案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;
}

【讨论】：