html - 表格边框折叠 : collapse not working when tr {display:table}

Question

当 thead 固定且 tbody 滚动时，我需要一个解决方案。我在 SO 上找到了这样的解决方案，但我遇到了 border-collapse:collapse 问题。这是我的 html 代码:

<table>
    <thead>
        <tr>
            <th></th>
            <th>#</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td>00000001</td>
            <td>Name 1</td>
        </tr>
        <tr>
            <td></td>
            <td>00000001</td>
            <td>Name 2</td>
        </tr>
        <tr>
            <td></td>
            <td>00000001</td>
            <td>Name 3</td>
        </tr>
    </tbody>
</table>

这是CSS规则:

table {
    display: table;
    width: 100%;
    border-collapse: collapse;
}

thead, tbody {
    width: 100%;
}

thead {
    overflow-y: scroll;
    display: table;
    table-layout: fixed;
    width:calc(100% - 16px);
}

tbody {
    overflow: scroll;
    height: 150px;
    display: block;
}

tr {
    width: 100%;
    text-align: left;
    display: table;
    table-layout: fixed;
}

th {
    border:1px solid #cccccc;
    border-collapse: collapse;
}

td {
    border:1px solid #cccccc;
    border-collapse: collapse;
}

这是 fiddle .如您所见，行之间的边界是 2 px，但必须是 1 px。我的错误是什么？

Answer 1

尝试添加它，这样您就不必更改样式:border-top:0;

td {
    border:1px solid #cccccc;
    border-top:0;
    border-collapse: collapse;