hr 在表格内但全宽

Question

我制作了这段代码

  <table>
    {item.awards.map((obj,i) => 
    <tbody>
        <tr>
            <td>Name</td>
            <td>:</td>
            <td>{obj.title}</td>
        </tr>
        <tr>
            <td>Date</td>
            <td>:</td>
            <td>{obj.award}</td>
        </tr>
        {i !== item.awards.length-1 ? <hr /> : ''}
    </tbody>
    )}
  </table>

它起作用了，每个块都有一个分隔符 (<hr/>)，但现在的问题是 hr 长度不是全宽。我不能让表格 100%，因为它会影响 td。

Answer 1

将hr 作为tbody 的直接子代是无效的。 tbody 的 content model 只允许 tr 元素（和脚本）。即使它似乎可以在一个浏览器中运行，也不能保证它可以在另一个浏览器中运行，甚至在它曾经运行的那个浏览器的下一个 dot rev 中也不能保证。

所以你需要将hr 放在tr 中，这意味着将它放在td 或th 中：

{i !== item.awards.length-1 ? <tr><td colspan="3"><hr /></td></tr> : null}

然后，您可以根据需要使用 CSS 设置 hr 的样式，使其尽可能宽。例如（注意分隔行上的 sep 类和它应用于行的 CSS 和 hr）：

table {
  border: 1px solid #ddd;
}
.sep hr {
  position: absolute;
  width: 100%;
  margin-top: -0.1em;
}
.sep {
  position: relative;
  overflow: hidden;
  height: 1em;
}

<table>
  <tbody>
    <tr>
      <td>Name</td>
      <td>:</td>
      <td>{obj.title}</td>
    </tr>
    <tr>
      <td>Date</td>
      <td>:</td>
      <td>{obj.award}</td>
    </tr>
    <tr class="sep">
      <td colspan="3">
        <hr />
      </td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>Name</td>
      <td>:</td>
      <td>{obj.title}</td>
    </tr>
    <tr>
      <td>Date</td>
      <td>:</td>
      <td>{obj.award}</td>
    </tr>
    <tr class="sep">
      <td colspan="3">
        <hr />
      </td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>Name</td>
      <td>:</td>
      <td>{obj.title}</td>
    </tr>
    <tr>
      <td>Date</td>
      <td>:</td>
      <td>{obj.award}</td>
    </tr>
  </tbody>
</table>

---

（旁注：对于该条件运算符的第三个操作数，null 比 '' 更好。）