javascript - 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>

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

Answer 1

将 hr 作为 tbody 的直接子代是无效的。 tbody 的 content model只允许 tr 元素(和脚本)。即使它似乎在一个浏览器中工作，也不能保证它在另一个浏览器中，甚至在它曾经工作的那个浏览器的下一个圆点版本中。

所以你需要把hr放在一个tr中，也就是说把它放在一个td或者th中>:

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

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

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 是比 '' 更好的选择。)