HTML表格边框仅在中间

Question

我正在寻找一张带有CSS的中间一条线的桌子。除了桌子的中心之外没有其他边界。 我的桌子是2x4
我尝试使用附加的代码，但它在左右外部添加了行

table {
  border-collapse: collapse;
}

tr {
  border: none;
}

td {
  border-right: solid 1px #f00;
  border-left: solid 1px #f00;
}

<table>
  <tbody>
    <tr>
      <td>a</td>
      <td>a</td>
    </tr>
    <tr>
      <td>a</td>
      <td>a</td>
    </tr>
    <tr>
      <td>a</td>
      <td>a</td>
    </tr>
    <tr>
      <td>a</td>
      <td>a</td>
    </tr>
  </tbody>
</table>

Answer 1

您可以将td规则更改为使用first-child pseudo class，例如：

td:first-child {
  border-right: solid 1px #f00;
}

示例：

table {
  border-collapse: collapse;
}

tr {
  border: none;
}

td:first-child {
  border-right: solid 1px #f00;
}

<table>
  <tbody>
    <tr>
      <td>a</td>
      <td>a</td>
    </tr>
    <tr>
      <td>a</td>
      <td>a</td>
    </tr>
    <tr>
      <td>a</td>
      <td>a</td>
    </tr>
    <tr>
      <td>a</td>
      <td>a</td>
    </tr>
  </tbody>
</table>