div表，需要1行在其他行之间扩展到全宽[重复]

Question

我正在为一张桌子（由 div 制成）而苦苦挣扎。我需要中间的行扩展到表格的整个宽度，并且在行的中心（而不是单元格）有文本。

我不想把整件事都交给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>

View on JSFiddle

Answer 1

我看到您愿意尽可能不使用表格布局以保持table 的全宽。所以我提出了这个“解决方案”。我不确定它是否能解决您的问题，但我希望它有助于为您指明正确的方向。

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

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

CSS-Tricks article about responsive tables with flex-box

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

Answer 2

这是一个已知问题：

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

如果您使用<div> 元素并尝试在它们上实现display:table，则一切正常，直到您需要colspan，因为colspan 没有CSS 等效项 可以用@987654327 实现@ 在非表格元素上。

所以你需要反过来做：保留<table> 元素，在你希望它应用的<td>s 上使用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>