嵌套表格必须具有折叠边框

Question

我用谷歌搜索并阅读了一些关于SO的文章。不幸的是，在嵌套表上显式设置边框不是一个选项 - 我确信我在使用之前已经这样做了border-collapse: collapse

也许整件事都是我想象出来的。我有以下 CSS：

    .table-grid {
        width: 100%;

    }

    .table-grid > thead > tr > th, 
    .table-grid > tbody > tr > th, 
    .table-grid > tfoot > tr > th, 
    .table-grid > thead > tr > td, 
    .table-grid > tbody > tr > td, 
    .table-grid > tfoot > tr > td {
        border: 1px solid red;
        border-collapse: collapse;
    }

红色边框仍然加倍、三倍等等……我错过了什么？还是误会？

这是用于 CNC 机器的相当复杂的调度工具的 UI - 因此不需要 DIV - 我需要使用表格来完成。

无论如何想法？

编辑| 标记如下

<table class="table-grid" style="background-color: #fff">
    <tr>
        <th>Month
            <table class="table-grid">
                <th>Jan</th>
                <th>Feb</th>
                <th>Mar</th>
                <th>Apr</th>
            </table>
        </th>
    </tr>

这有点微不足道 - 否则 id' 只是将月份保留为 colspan"7" - 实际范围要复杂得多 - 所以 colspan 技术是不够的

Answer 1

border-collapse: collapse;必须应用于表格才能生效，而不是应用于表格单元格。但是，border-collapse仅适用于共享公共父级的表单元格（<td>或） 。这意味着您不能合并嵌套表的单元格，也不能合并不是或元素的元素。<th><table><td><th>

在您的示例中，这变得有点棘手，因为所有表（包括嵌套表）共享同一个类。

通过一点创意 CSS，我们可以隐藏所有嵌套单元格的底部和左侧边框。此外，我们必须删除一行中最后一个单元格的右边框。

使用嵌套选择器的组合.table-grid .table-grid，以及:last-child更改嵌套行的最后一个单元格，您可以想出一个无限“可嵌套”的示例，如下所示：

.table-grid {
  width: 100%;
  border-collapse: collapse;
}

.table-grid>tbody>tr>th {
  padding: 0;
}

.table-grid>thead>tr>th,
.table-grid>tbody>tr>th,
.table-grid>tfoot>tr>th,
.table-grid>thead>tr>td,
.table-grid>tbody>tr>td,
.table-grid>tfoot>tr>td {
  border: 1px solid red;
}

.table-grid .table-grid td,
.table-grid .table-grid th {
  border-top: 1px solid red;
  border-right: 1px solid red;
  border-bottom: 0;
  border-left: 0;
}

.table-grid .table-grid td:last-child,
.table-grid .table-grid th:last-child {
  border-right: 0;
}

<table class="table-grid" style="background-color: #fff">
  <tr>
    <th>Month
      <table class="table-grid">
        <tr>
          <th>Jan</th>
          <th>Feb</th>
          <th>Mar</th>
          <th>Apr</th>
        </tr>
      </table>
    </th>
  </tr>
</table>