CSS表格:从列平移到整个表格宽度

CSS tables: colspan row to full table width

本文关键字：表格 CSS      更新时间：2023-09-26

我有一组带有display: table-*规则的嵌套块。它们组成了一个流动表（我不需要设置特定的width大小）。

如何添加列平移整个表格宽度的行？（注意：该行位于其他行之间；不在顶部也不在底部）

我找到了一个依赖JS的解决方案，在这里我计算整个宽度和行宽度（取决于内容）之间的差异（以px为单位），并将其用作margin-right。

参见此示例

但它没有正确计算尺寸（如果你检查web检查器的尺寸，与console.log中的尺寸相比，你会看到差异）。

是否可以将行缩小到整个表格的宽度？其他解决方案/工艺有哪些？（因为这样做的缺点是每次调整浏览器窗口的大小时都必须重新计算）。

没有真正的方法可以做到这一点，所以这取决于你觉得离当前布局有多远。

在这个版本中，每个"行"都被视为一个表，所以在每个表中放入多少单元格并不重要。

.table-row {
  display: table;
  width: 50%;
  table-layout: fixed;
  background: #ccc;
}
.title {
  font-weight: bold;
}
.cell {
  display: table-cell;
  padding: 3px;
}
.colspan {
  background-color: limegreen;
}
<div class="table-row">
  <div class="cell title">1</div>
  <div class="cell title">2</div>
  <div class="cell title">3</div>
  <div class="cell title">4</div>
</div>
<div class="table-row">
  <div class="cell">content 1</div>
  <div class="cell">content 2</div>
  <div class="cell">content 3</div>
  <div class="cell">content 4</div>
</div>
<div class="table-row">
  <div class="cell colspan">how-do-I-make-this-colspan-the-whole-width-of-the-table-row?</div>
</div>
<div class="table-row">
  <div class="cell">content 1</div>
  <div class="cell">content 2</div>
  <div class="cell">content 3</div>
  <div class="cell">content 4</div>
</div>

它也相对容易风格太

.table-row {
  display: table;
  width: 50%;
  table-layout: fixed;
  background: #ccc;
  border-top: 1px solid #000
}
.table-row:last-child {
  border-bottom: 1px solid #000
}
.cell {
  display: table-cell;
  padding: 3px;
  border-left: 1px solid #000;
  color: #111;
}
.cell:last-child {
  border-right: 1px solid #000
}
.title {
  font-weight: 700;
  background-color: #333;
  color: #ccc;
}
.colspan {
  background-color: #32cd32
}
<div class="table-row">
  <div class="cell title">1</div>
  <div class="cell title">2</div>
  <div class="cell title">3</div>
  <div class="cell title">4</div>
</div>
<div class="table-row">
  <div class="cell">content 1</div>
  <div class="cell">content 2</div>
  <div class="cell">content 3</div>
  <div class="cell">content 4</div>
</div>
<div class="table-row">
  <div class="cell colspan">how-do-I-make-this-colspan-the-whole-width-of-the-table-row?</div>
</div>
<div class="table-row">
  <div class="cell">content 1</div>
  <div class="cell">content 2</div>
  <div class="cell">content 3</div>
  <div class="cell">content 4</div>
</div>

相关文章：