Question

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

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

我找到了一个依赖于JS的解决方案，我计算了整个宽度和行宽（取决于内容）之间的差异（在 px 中），并将其用作{{ 1}}。

请参阅this example

但它没有正确计算尺寸（如果检查网页检查员的尺寸，与margin-right中的尺寸相比，则会看到差异）。

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

Answer 1

没有真正的方法可以做到这一点，所以这取决于您目前的布局与您感觉舒适的距离。

在这个版本中，每个“行”都被视为一个表，因此每个单元中放置的单元数并不重要。

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

CSS表：colspan行到全表宽度

1 个答案: