javascript - 如何在不同 tr 中的 td 之间添加边框？

Question

为了简化我的问题，我写了下面的 html 和 css 来给出一个概述。我想在 A/C 和 B/D 之间添加边框。我怎样才能做到这一点 ？如果我不清楚我的问题，请告诉我。谢谢。

table.test {
  border-collapse: separate;
  border-spacing: 10px;
  width: 100%;
}
.tdLeft {
  vertical-align: top;
  width: 390px;
}
.tdRight {
  padding-left: 4px;
  width: 390px;
  vertical-align: top;
  border-left: solid;
  border-width: 1px
}

<table class="test">
  <tr>
    <td class="tdLeft">
      <td>A</td>
      <td>B</td>
    </td>
  </tr>
  <tr>
    <td class="tdRight">
      <td>C</td>
      <td>D</td>
    </td>
  </tr>
</table>

Answer 1

首先，您需要删除包含数据的 td 周围的 td 标签。 td 没有嵌套。如果您想分配一个适用于给定 tr 中所有 td 的类，则将该类分配给 tr。

现在添加边框:我们可以使用简单的 CSS 来完成此操作，同时向您的 html 添加一个类:

<table class="test">
  <tr class="firstRow">
    <td>A</td>
    <td>B</td>
  </tr>
  <tr>
    <td>C</td>
    <td>D</td>
  </tr>
</table>

以下 CSS 为您提供了两条不同的线 - 一条在 A 下方，一条在 B 下方。

table.test {
  border-collapse: separate;
  border-spacing: 10px;
  width: 100%;
}

.tdLeft {
  vertical-align: top;
  width: 390px;
}

.tdRight {
  padding-left: 4px;
  width: 390px;
  vertical-align: top;
}

.firstRow td {
    border-bottom: 1px solid red;
}

如果你想在两个单元格下面有一条连续的线(在整行下划线)，你需要调整你的 CSS 的其他部分 - 删除 border-spacing，并将 border-collapse 设置为 collapse:

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

.tdLeft {
  vertical-align: top;
  width: 390px;
}

.tdRight {
  padding-left: 4px;
  width: 390px;
  vertical-align: top;
}

.firstRow td {
    border-bottom: 1px solid red;
}