Question

我有一个类似this的html结构，我无法弄清楚如何修复它。

<table border="0" cellspacing="0" cellpadding="0" align="center" width="200px" class="external">
    <tr>
        <th>Firstname</th>
        <th>Lastname</th>
    </tr>
    <tr>
        <td>Peter</td>
        <td>Griffin</td>
    </tr>
    <tr>
        <td>Lois</td>
        <td>
            <table border="0" cellspacing="0" cellpadding="0" align="center" width="100%" class="internal">
                <tr>
                    <th>Firstname</th>
                    <th>Lastname</th>
                </tr>
                <tr>
                    <td>Peter</td>
                    <td>Griffin</td>
                </tr>
                <tr>
                    <td>Lois</td>
                    <td>Griffin</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

我想折叠外部表格与<td>内的表格之间的边框。可能吗？

之后，我想让内部表格的边框与外部表格中的另一种颜色。

Answer 1

您所看到的是内部表格中单元格的边框，而不是外部边框。棘手的是你不想完全关闭那些细胞的边界，因为它会看起来像skoogiwampus。

尝试

.internal {
  border: none;
}
.internal td,
.internal th {
  border-color: yellow;
}
.internal tr:first-child th {
  border-top: none;
}
.internal tr:last-child td {
  border-bottom: none;
}
.internal tr td:first-child,
.internal tr th:first-child {
  border-left: none;
}
.internal tr td:last-child,
.internal tr th:last-child {
  border-right: none;
}

这使用伪选择器仅处理您需要关闭的边框。它很冗长，但它会做你需要的。

https://jsfiddle.net/aff19ahg/3/

如何折叠表格内的边框到表格

1 个答案: