如何使用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，您可以使用表格元素构建表格，然后使用 display: block 和 inline-block 设置您想要的样式。不过，如果您的需求确实像看起来那么简单，那么一个简单的 colspan 就可以完成工作。

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

Answer 2

另一种方法是在 css 中设置空白不换行。

<div class="no-wrap-cell">This goes in a single line</div>

.no-wrap-cell{
    white-space: nowrap !important;
}

Answer 3

在单元格内附加表格应该可以澄清您的问题。请参考下面的片段

.table {
  display:table;
   table-layout: fixed;
    width: 100%;
    border-collapse:collapse
}

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

.cell-full {
  // full width of table
}

<div class="table">
  <div class="row">
    <div class="cell p0">
        <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>
   </div>
    
  </div>
  <div class="row">
    <div class="cell cell-full">this changes the width of the cell above</div>
  </div>
</div>

Answer 4

我认为结果没有任何问题。在设置为显示为

table

和

table-row

的 div 中，它的行为类似于表格。

要获得所需的结果，请关闭第一个表并启动另一个表。

<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>
<div class="table">
  <div class="row">
    <div class="cell cell-full">this changes the width of the cell above</div>
  </div>
</div>

https://jsfiddle.net/bpyrgsvc/4/

Answer 5

Flexbox 可以做到这一点：

.row {
  display: flex;
}
.cell {
  flex: 1;
  padding: 5px;
  border: 1px solid black;
}

<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 NO LONGER changes the width of the cell above</div>
  </div>
</div>

Answer 6

我在可滚动框中有一张表格，发现 colspan 不起作用。我最终使用

width:calc(100vw)

让它伸展。