如何使用 HTML 跳过表格中的单元格？答案

【问题标题】：How to skip a cell in a table with HTML?如何使用 HTML 跳过表格中的单元格？
【发布时间】：2021-04-24 21:36:47
【问题描述】：

如何使用 HTML 跳过第一行的第一个单元格，同时保持表格其余部分的表格边框（如图片中的示例）？我知道如何使用单个单元格边框来做到这一点，但我想保留外部表格边框而不是没有单元格边框。有没有办法，例如，从第二列开始第一行？

【问题讨论】：

欢迎来到 Stack Overflow！请访问help center，以tour 了解内容和How to Ask。做一些研究，搜索关于SO的相关主题；如果您遇到困难，请发布您尝试的minimal reproducible example，注意输入和预期输出，最好在Stacksnippet
请附上您要审核的 HTML，以帮助其他人回答您的问题。

标签： html

【解决方案1】：

创建一个空单元格来表示剪切（is valid and recommended by the spec），从该空单元格中删除背景，并为其赋予与表格相同的边框属性，但将其边框样式设置为隐藏与表格边框重叠的位置（在这种情况下，顶部和左侧边框）。任何样式被隐藏的表格单元格的边框都会导致在折叠边框模式下与其重叠的任何边框消失（CSS2.1、css-tables-3）：

table {
  width: 100%;
  border: 1px solid #000;
  border-collapse: collapse;
  border-spacing: 0;
}

th {
  background-color: #56a9ce;
}

th, td {
  font-family: sans-serif;
  text-align: center;
}

tr:first-child > th:first-child {
  background-color: transparent;
  border: 1px #000;
  border-style: hidden solid solid hidden;
}

<table>
  <thead>
    <tr>
      <th></th><th colspan="3">Content</th>
    <tr>
      <th>Content</th><th>Content</th><th>Content</th><th>Content</th>
  </thead>
  <tbody>
    <tr>
      <td>X</td><td>X</td><td>X</td><td>X</td>
    <tr>
      <td>X</td><td>X</td><td>X</td><td>X</td>
    <tr>
      <td>X</td><td>X</td><td>X</td><td>X</td>
  </tbody>
</table>

【讨论】：

我从没想过你可以用一个隐藏的边框重叠一个实心边框而看不到它。
@julien.giband：表格 CSS 的隐藏（呵呵）宝石之一。

【解决方案2】：

你可以使用 CSS 伪类作为关键字。例如，要从第二列开始第一行：

.table tr:first-child > td:ntn-child(2) {
  // Something
}

你也可以使用:not()。

【讨论】：

【解决方案3】：

您需要为每个单元格设置边框，而不是在表格上全局设置。

代码可能看起来像

table {
  border: none;
}
table tr:first-child td {
  border-top: 1px solid black;
}
table tr:last-child td {
  border-bottom: 1px solid black;
}

/* ... same for columns with pseudo classes on td */

/* first cell in first row */
table tr:first-child td:first-child {
  border: 1px solid black;
  border-left-color: transparent;
  border-top-color: transparent;
}

我让你自己弄清楚细节

【讨论】：