html - 如何让表格单元格使用 css 占据表格的整个宽度？

Question

出于某种原因，我表格中第二行的单元格正在改变上面一行中单元格的宽度。我不知道为什么会这样。我不想更改第一行中第一个单元格的宽度。我已经在 jsfiddle 中重现了这个问题，以明确我的意思。

FiddleJS 链接:

https://jsfiddle.net/bpyrgsvc/1/

HTML:

<div class="table">
  <div class="row">
    <div class="cell">test</div>
    <div class="cell">test</div>
    <div class="cell">test</div>
    <div class="cell">test</div>
    <div class="cell">test</div>
  </div>
  <div class="row">
    <div class="cell">this changes the width of the cell above</div>
  </div>
</div>

CSS:

.table {
  display:table;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  padding: 5px;
  border: 1px solid black;
}

Answer 1

使用 CSS，您可以使用 table 元素构建表格，然后使用 display: block 和 inline-block 设置您想要的样式。不过，如果您的需求真的像看起来那么简单，那么一个简单的 colspan 就可以完成工作。

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td colspan="4"></td>
  </tr>
</table>