Question

我有两个要排队的表，作为简单的演示，我制作了以下可重复的代码来说明我的问题

#index_table,
#index_table_header {
  text-align: left;
  margin: 20px;
  margin: 0 auto;
}

#index_table,
#index_table_header {
  width: 800px;
}

#index_table_header th {
  padding: 10px 8px;
  width: 100px;
  border: 1px solid black;
}

#index_table td {
  padding: 10px 8px;
  width: 100px;
  border: 1px solid black;
}

#index_table td:nth-child(1),
#index_table_header th:nth-child(1) {
  width: 60px;
}

#index_table td:nth-child(3),
#index_table_header th:nth-child(3) {
  width: 70px;
}

#index_table td:nth-child(5),
#index_table_header th:nth-child(5) {
  width: 200px;
}

#index_table td:nth-child(2),
#index_table_header th:nth-child(2) {
  width: 250px;
}

<table id="index_table_header">
  <thead>
    <tr>
      <th scope="col">ID</th>
      <th scope="col">Item</th>
      <th scope="col">Amount</th>
      <th scope="col">Added</th>
      <th scope="col">Nutritional Value ID</th>
      <th scope="col">Actions</th>
    </tr>
  </thead>
</table>
<table id="index_table">
  <tbody>
    <tr>
      <td>395</td>
      <td>chicken liver</td>
      <td>0.37</td>
      <td>2019-10-14</td>
      <td>67</td>
      <td>
        <a href="/delete/395">Delete</a>
        <br>
        <a href="/update/395">Update</a>
      </td>
    </tr>
  </tbody>
</table>

第一个表的第一个th的宽度比秒表td的稍小，然后沿这些单元格看，它们都不同步。

Answer 1

将table-layout: fixed;添加到表格规则中。这将迫使表格忽略单元格的内容，而是根据指定的宽度换行。

table {
  table-layout: fixed;
}

#index_table,
#index_table_header {
  text-align: left;
  margin: 20px;
  margin: 0 auto;
}

#index_table,
#index_table_header {
  width: 800px;
}

#index_table_header th {
  padding: 10px 8px;
  width: 100px;
  border: 1px solid black;
}

#index_table td {
  padding: 10px 8px;
  width: 100px;
  border: 1px solid black;
}

#index_table td:nth-child(1),
#index_table_header th:nth-child(1) {
  width: 60px;
}

#index_table td:nth-child(3),
#index_table_header th:nth-child(3) {
  width: 70px;
}

#index_table td:nth-child(5),
#index_table_header th:nth-child(5) {
  width: 200px;
}

#index_table td:nth-child(2),
#index_table_header th:nth-child(2) {
  width: 250px;
}

<table id="index_table_header">
  <thead>
    <tr>
      <th scope="col">ID</th>
      <th scope="col">Item</th>
      <th scope="col">Amount</th>
      <th scope="col">Added</th>
      <th scope="col">Nutritional Value ID</th>
      <th scope="col">Actions</th>
    </tr>
  </thead>
</table>
<table id="index_table">
  <tbody>
    <tr>
      <td>395</td>
      <td>chicken liver</td>
      <td>0.37</td>
      <td>2019-10-14</td>
      <td>67</td>
      <td>
        <a href="/delete/395">Delete</a>
        <br>
        <a href="/update/395">Update</a>
      </td>
    </tr>
  </tbody>
</table>

HTML CSS相同的表格无法排列

1 个答案: