如何让 table 单元格占据 table 和 css 的整个宽度？

Question

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

FiddleJS link:

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

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

.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 2

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

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

Answer 3

我没有发现结果有任何问题。在设置为 table 和 table-row 的 div 中，它表现为 tables。

要获得您想要的结果，请关闭第一个 table 并开始另一个。

<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 4

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 5

另一种方法是在 css.

中设置空格不换行

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

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

如何让 table 单元格占据 table 和 css 的整个宽度？

How can I let a table cell take in the full width of the table with css?

html

css

display