css table th 和 td 不占宽度的 100%

Question

我想通过仅操作 css 来使 th 和 td 都是 100% 宽度。 看起来 th 延伸得很远，但从未完全推出 td。 这段代码有什么问题？

.custom-table {
  display: grid;
  width: 100%;
  table-layout:fixed;
}

.custom-table th,
.custom-table td {
  width: 100%;
  border: 1px solid black; /* Just for visualization */
  text-align: center; /* Center the content */
  padding: 5px;
}

<table class="custom-table">
<tbody>
  <tr>
    <th>name</th>
    <td>Alex</td>
  </tr>
  </tbody>
  
  <tbody>
  <tr>
    <th>Age</th>
    <td>30</td>
  </tr>
  </tbody>
</table>

Answer 1

要实现让

<th>

和

<td>

元素占据 100% 宽度的目标，您可能需要重新考虑您的方法。您可以尝试这样的方法，而不是使用基于百分比的宽度：

.custom-table {
  width: 100%;
  border-collapse: collapse; /* Merge cell borders */
}

.custom-table th,
.custom-table td {
  border: 1px solid black; /* Just for visualization */
  text-align: center; /* Center the content */
  padding: 5px;
}

/* Distribute available width evenly among table cells */
.custom-table th {
  width: 50%;
}

.custom-table td {
  width: 50%;
}

还有你的html：

<table class="custom-table">
  <tbody>
    <tr>
      <th>name</th>
      <td>Alex</td>
    </tr>
    <tr>
      <th>Age</th>
      <td>30</td>
    </tr>
  </tbody>
</table>