不规则表格与表格标题的边框答案

【问题标题】：Irregular table vs borders along table headers不规则表格与表格标题的边框
【发布时间】：2018-02-04 02:33:14
【问题描述】：

我有某种相似的表格，我想要做的就是沿着表格标题放置边框，在屏幕上用红色标记。

表格形状用黑色标记，我不希望这个黑色边框可见。我忘了在这张图片上指出一些 td 也沿行分成两半。

我希望有比为我需要的每个单独的 td 设置边框更好的方法。

【问题讨论】：

这就是 TH 标签的用途。

标签： html html-table border

【解决方案1】：

如果你给你的桌子上课..

<table class='my-table'>

然后您可以使用 css 定位该类中的所有 td

.my-table td {
   border-left:1px solid red;
   border-right: 1px solid red;
}
.my-table {
   border-bottom: solid 1px red;
}

对于沿行分成两半的 td，关闭它们的边框（可能通过内联样式）可能比打开所有其他 td 的边框更容易。也就是说，如果我理解你正在尝试做什么。希望这会有所帮助。

【讨论】：

【解决方案2】：

您要使用的是边框折叠和左右边框的组合：

<table>
<thead>
  <tr>
    <th>Header One</th>
    <th>Header Two</th>
    <th>Header Three</th>
    <th>Header Four</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Sanctus sea sed takimata</td>
    <td rowspan="4">Sanctus sea sed takimata</td>
    <td rowspan="2">Sanctus sea sed takimata</td>
    <td>Sanctus sea sed takimata</td>
  </tr>
  <tr>
    <td>Sanctus sea sed takimata</td>
    <td rowspan="3">Sanctus sea sed takimata</td>
  </tr>
  <tr>
    <td>Sanctus sea sed takimata</td>
    <td>Sanctus sea sed takimata</td>
  </tr>
  <tr>
    <td>Sanctus sea sed takimata</td>
    <td rowspan="2">Sanctus sea sed takimata</td>
  </tr>
  <tr>
    <td>Sanctus sea sed takimata</td>
    <td rowspan="2">Sanctus sea sed takimata</td>
    <td rowspan="4">Sanctus sea sed takimata</td>
  </tr>
  <tr>
    <td>Sanctus sea sed takimata</td>
    <td rowspan="3">Sanctus sea sed takimata</td>
  </tr>
  <tr>
    <td>Sanctus sea sed takimata</td>
    <td rowspan="2">Sanctus sea sed takimata</td>
  </tr>
  <tr>
    <td>Sanctus sea sed takimata</td>
  </tr>
</tbody>
</table>

使用 css：

table {
    border-collapse: collapse;
}

table thead tr {
    border: 1px solid black;
}

table tbody {
    border-bottom: 1px solid blue;
}

table tbody tr td {
    border-left: 1px solid blue;
    border-right: 1px solid blue;
}

查看：http://jsfiddle.net/PYWHA/

【讨论】：

相当不错，但我的情况更像jsfiddle.net/PYWHA/4 t 所以你的解决方案并没有真正添加边界