表格行未扩展到全宽

Question

我有一个表格，当我将表格的宽度设置为 100% 并将表格行的宽度设置为 100% 时，没有任何反应或宽度发生变化。

 .Table-Normal {
  position: relative;
  display: block;
  margin: 10px auto;
  padding: 0;
  width: 100%;
  height: auto;
  border-collapse: collapse;
  text-align: center;
}

.Table-Normal thead tr {
  background-color: #E74C3C;
  font-weight: bold;
}

.Table-Normal tr {
  margin: 0;
  padding: 0;
  border: 0;
  border: 1px solid #999;
  width: 100%;
}

.Table-Normal tr td {
  margin: 0;
  padding: 4px 8px;
  border: 0;
  border: 1px solid #999;
}

.Table-Normal tbody tr:nth-child(2) {
  background-color: #EEE;
}

 <table id="top-leader" class="Table-Normal">
  <thead>
    <tr>
      <td>Position</td>
      <td>Name</td>
      <td>Kills</td>
      <td>Deaths</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John Doe</td>
      <td>16 Kills</td>
      <td>0 Deaths</td>
    </tr>

    <tr>
      <td>2</td>
      <td>John Smith</td>
      <td>13 Kils</td>
      <td>1 Death</td>
    </tr>

    <tr>
      <td>3</td>
      <td>Bob Smith</td>
      <td>11 Kills</td>
      <td>0 Deaths</td>
    </tr>
  </tbody>
</table>

原文由 Moussa Harajli 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

删除 display: block 在 .Table-Normal

小提琴

.Table-Normal {
    position: relative;
    //display: block;
    margin: 10px auto;
    padding: 0;
    width: 100%;
    height: auto;
    border-collapse: collapse;
    text-align: center;
}

原文由 JunM 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

通过指定 display: block 您已经覆盖了浏览器样式表中 table 元素的默认值： display: table 删除 display: block 或将其替换为 display: table 修复此问题。

原文由 gsnedders 发布，翻译遵循 CC BY-SA 3.0 许可协议