Table 未按预期显示

Question

为什么我在尝试向 table 添加行时会出现这种显示？

我想要得到的是按预期在 Commande 列下方设置第二个 Testsssssssss。下面是我的代码：

table {
  overflow: scroll;
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #cccccc;
}

#thead {
  background-color: #f8f4f4;
  height: 50px;
  border: 1px solid #cccccc;
  color: #929292;
}

#tableBody {
  display: block;
}

th {
  border: 1px solid #cccccc;
}

<table>
  <thead id="thead">
    <tr>
      <th scope="col">Email</th>
      <th scope="col">Commande</th>
      <th scope="col">Total</th>
      <th scope="col">Status</th>
      <th scope="col">Date</th>
      <th scope="col">Mode d'expédition</th>
      <th scope="col">Code promo</th>
      <th scope="col">Quantité</th>
      <th scope="col">Nom</th>
      <th scope="col">Voie</th>
      <th scope="col">Adresse</th>
      <th scope="col">Adresse 1</th>
      <th scope="col">Entreprise</th>
      <th scope="col">Ville</th>
      <th scope="col">Code Postal</th>
      <th scope="col">Pays</th>
      <th scope="col">Téléphone</th>
    </tr>
  </thead>
  <tbody id="tableBody">
    <tr>
      <td scope="row">Testsssssssss</td>
      <td>Testsssssssss</td>
    </tr>
  </tbody>
</table>

Answer 1

由于您使用的是 table 标记，因此显示已设置为 table，但随后在您的 CSS 中，您将显示属性覆盖为 BLOCK，因此解决方案很简单，请参阅下面的 CSS，也请添加更多数据作为标题数。

table {
  overflow: scroll;
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #cccccc;
}

#thead {
  background-color: #f8f4f4;
  height: 50px;
  border: 1px solid #cccccc;
  color: #929292;
}

/* #tableBody {
  display: block;
}This attribute is not needed  */ 

th {
  border: 1px solid #cccccc;
}

Table 未按预期显示

Table not displaying as expected

html

css

html-table

css-tables

display