Question

当thead被修复并且tbody有滚动时我需要一个解决方案。我在SO上找到了这样的解决方案，但我有一个边界崩溃：崩溃问题。这是我的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;

}

表格边框折叠：tr {display：table}

1 个答案: