div 表，需要 1 行才能在其他行之间扩展到全宽

Question

我正在为一张桌子(由divs组成(而苦苦挣扎。我需要中间的行扩展到表格的整个宽度，并在行的中心(而不是单元格(显示文本。

我不希望整个事情overflow-x.并且与此扩展行中的文本长度无关，两个主要列的宽度不应更改。

所以，基本上，我想要一个独立的div，需要在表格内。
我怎样才能做到这一点？

.divTable {
  display: table;
  margin: auto;
  width: 100%
}
.divTableBody {
  display: table-row-group;
}
.divTableRow {
  display: table-row;
}
.divTableCell {
  display: table-cell;
  border: 1px solid blue;
}
.divTableCellExtended {
  white-space: nowrap;
}

<div class="divTable">
  <div class="divTableBody">
    <div class="divTableRow">
      <div class="divTableCell">
        some random text here
      </div>
      <div class="divTableCell">
        some random text here
      </div>
    </div>
    <div class="divTableRow">
      <div class="divTableCellExtended">
        some random text here long enough to extend out of single cell
      </div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">
        some random text here
      </div>
      <div class="divTableCell">
        some random text here
      </div>
    </div>
  </div>
</div>

在 JSFiddle 上查看

Answer 1

这是一个已知问题：

您希望利用 display:table/<table> 元素的属性，即根据内容自动调整同一列中单元格的宽度，但您希望在较窄的设备上响应显示它们。

如果您使用 <div> 元素并尝试在它们上实现display:table，那么在您需要colspan之前一切正常，因为 colspan 没有等效的 CSS 来实现对非表元素的display:table-cell;。

因此，您需要以相反的方式进行操作：保留<table>元素，在您希望应用<td>上使用colspan，并在狭窄的设备上强制执行display:block。

概念验证：

.table {
  width: 100%;
  border-collapse: collapse;
}
.table td {
  border: 1px solid blue;
  padding: .5rem 1rem;
}
@media (max-width:660px) {
  /* change the breakpoint to whatever you need. 660px is just an example */
  .table,
  .table tbody,
  .table thead,
  .table tfoot,
  .table tr,
  .table td,
  .table th {
    display: block;
  }  
  .table td {
    margin: 0 -1px -1px 0;
  }
  .table tr {
    margin-bottom: 1rem;
  }
}
/* rest is just styling. ignore */
body  {background-color: #eee;}
.table {
  box-shadow: 0 3px 5px -1px rgba(0,0,0,.1), 0 5px 8px 0 rgba(0,0,0,.07), 0 1px 14px 0 rgba(0,0,0,.06)
}
.table td {
  border-color: #ddd;
  background-color: white;
}
@media(max-width: 660px) {
  .table {
    box-shadow: none;
  }
  .table tr {
    box-shadow: 0 3px 5px -1px rgba(0,0,0,.1), 0 5px 8px 0 rgba(0,0,0,.07), 0 1px 14px 0 rgba(0,0,0,.06)
  }
}

<table class="table" >
  <tr>
    <td>1.1 some random text here</td>
    <td>1.2 some random text here</td>
    <td>1.3 some random text here</td>
  </tr>
  <tr>
    <td colspan="3">2. some random text here, expanding across 3 columns and wrapping up, like it should... some random text here, expanding across 3 columns and wrapping up, like it should... some random text here, expanding across 3 columns and wrapping up, like it should... some random text here, expanding across 3 columns and wrapping up, like it should... some random text here, expanding across 3 columns and wrapping up, like it should...</td>
  </tr>
  <tr>
    <td>3.1. some random text here, in 1 column and wrapping up, like it should...</td>
    <td colspan="2">3.2. some random text here, in 2 columns and wrapping up, like it should... some random text here, expanding across 2 columns and wrapping up, like it should... some random text here, expanding across 2 columns and wrapping up, like it should...</td>
  </tr>
  <tr>
    <td colspan="2">4.1. some random text here, in 2 columns and wrapping up, like it should... some random text here, expanding across 2 columns and wrapping up, like it should... some random text here, expanding across 2 columns and wrapping up, like it should...</td>
    <td>4.2. (or 4.3. - what is it?) some random text here, in 1 column and wrapping up, like it should...</td>
  </tr>
</table>

Answer 2

我看到您愿意尽可能不使用表格布局以保持table的完整宽度。所以我带着这个"解决方案"来了。我不确定它是否解决了您的案件，但我希望它有助于为您指明正确的方向。

编辑：修复(部分，仍然在小宽度上失去对齐(width问题，以便额外的内容不会推高侧面的列。(将flex-basis: 0添加到 .cell 样式(。

Edit2 如果您碰巧使用这种解决方案，也许您可以查看有关弹性框和响应式表格的其他(和更完整的(内容。

CSS 技巧文章 关于使用弹性框的响应式表格

.table {
  display: flex;
  flex-flow: column;
  width: 100%;
}
.row {
  display: flex;
  border: 1px solid blue;
  border-top: none;
}
.row:first-child {
  border-top: 1px solid blue;
}
.cell {
  border-right: 1px solid blue;
  flex-grow: 1;
  flex-basis: 0;
}
.cell:last-child {
  border: none;
}

<div class="table">
  <div class="row">
    <div class="cell">1,1</div>
    <div class="cell">Large content should not be able to push up columns on the side...</div>
    <div class="cell">1,3</div>
  </div>
  <div class="row">
    <div class="cell">2,1</div>
  </div>
  <div class="row">
    <div class="cell">3,1</div>
    <div class="cell">3,2</div>
    <div class="cell">3,3</div>
  </div>
</div>