html中包含行范围的表不起作用

Question

我想在react中创建一个表，它有一些像这样的水平标题：

所以我在写：

<table className="table table-hover">
  <thead>
    <tr>
      <td />
      <th>EUR</th>
      <th>USD</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">AVAILABLE TO TRADE</th>
      <td>€123.154,12</td>
      <td>$3.154,12</td>
      <th scope="row">AVAILABLE TO WITHDRAW (LOCAL)</th>
      <td>€123.154,12</td>
      <td>$3.154,12</td>
    </tr>
  </tbody>
</table>

但是，这似乎不起作用。它给了我这样的东西：

为什么会这样？

Answer 1

您需要两行，但只定义了一个<tr>。这使得所有东西都挤成一行，这就是为什么它看起来像你的例子。

尝试：

＆＃13;

＆＃13;

<table className="table table-hover">
  <thead>
    <tr>
      <td />
      <th>EUR</th>
      <th>USD</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">AVAILABLE TO TRADE</th>
      <td>€123.154,12</td>
      <td>$3.154,12</td>
    </tr>
    <tr>
      <th scope="row">AVAILABLE TO WITHDRAW (LOCAL)</th>
      <td>€123.154,12</td>
      <td>$3.154,12</td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

另请注意，<td />无法在HTML中自行关闭。但是，由于你使用的是React，它是有效的JSX，但它可能仍然是一个不好的做法。只有可以在HTML中自我关闭的自我关闭标记（例如<br />或<img />）和React组件。