Question

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

FiddleJS链接：

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

在单元格中附加表格应该澄清您的问题。请参阅下面的代码段

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

我没有看到结果有任何问题。在显示为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 4

Flexbox可以做到这一点：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

另一种方法是不为CSS中的空白设置换行。

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

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

如何让表格单元格与css一起占据表格的整个宽度？

5 个答案: