<分区>
标签 html css html-table display
<分区>
我正在努力处理一张 table (由 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>最佳答案
这是一个已知问题:
您想利用 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>关于html - Div 表格，需要 1 行以在其他行之间扩展到全宽，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48310310/