Question

我用Google搜索并阅读了一些关于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>

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

1 个答案: