Question

我正在与一张桌子（由div组成）挣扎。我需要中间的行延伸到表格的整个宽度，文本位于行的中心（不是单元格）。

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

View on JSFiddle

Answer 1

这是一个已知问题：

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

如果你使用<div>元素并尝试对它们实施display:table，那么一切正常，直到你需要colspan，因为 colspan没有CSS等价物在非表元素上使用display:table-cell;实现。

所以你需要反过来做：保留<table>个元素，在你希望它应用的colspan上使用<td>并强制执行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 如果您碰巧使用此类解决方案，也许您可以查看有关flex-box和响应表的其他（并且更完整）内容。

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>

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

2 个答案: