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元素（和脚本）。即使它似乎在一个浏览器中工作，也不能保证它会在另一个浏览器中工作，或者甚至在它曾经工作过的那个网站的下一个网点中。

因此，您需要将hr放入tr，这意味着将其放入td或th：

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

表内但是全宽

1 个答案: