我想用 CSS 创建一个表格,它使用 table-cell
但允许多个 cospans,例如:
我已经发现表格的最后一行是可能的,请参阅 answer还有这个jFiddle .
但是我没有设法对中间的行执行此操作。这个问题有解决方案吗?
#table {
display: table;
}
.group {
display: table-row-group;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
border: 1px solid grey;
padding: 5px
}
.caption {
border: 1px solid grey;
caption-side: bottom;
display: table-caption;
text-align: center;
}
<div id="table">
<div class="group">
<div class="row">
<div class="cell">525234234234</div>
<div class="cell ">41414124124</div>
<div class="cell ">13123123</div>
</div>
</div>
<div class="group">
<div class="row">
<div class="cell">525234234234</div>
<div class="cell ">41414124124</div>
<div class="cell ">13123123</div>
</div>
</div>
<div class="group">
<div class="row">
<div class="cell">525234234234</div>
<div class="cell ">41414124124</div>
<div class="cell ">13123123</div>
</div>
</div>
<div class="caption">
Hi
</div>
</div>
最佳答案
您可以尝试一些解决方法来创建具有 colspan/rowspan 的错觉,因为它们没有通过 display:table: 实现的:
#table {
display: table;
}
.group {
display: table-row-group;
}
.row,
.caption {
display: table-row;
}
.cell {
display: table-cell;
border: 1px solid grey;
padding: 5px
}
.caption>.cell {
border-right: none;
border-left: none;
}
.caption>.cell:last-child {
border-right: 1px solid grey;
}
.caption>.cell:first-child {
border-left: 1px solid grey;
}
<div id="table">
<div class="group">
<div class="row">
<div class="cell">525234234234</div>
<div class="cell ">41414124124</div>
<div class="cell ">13123123</div>
</div>
<div class="caption">
<div class="cell">Hi</div>
<div class="cell "></div>
<div class="cell "></div>
</div>
</div>
<div class="group">
<div class="row">
<div class="cell">525234234234</div>
<div class="cell ">41414124124</div>
<div class="cell ">13123123</div>
</div>
</div>
<div class="group">
<div class="row">
<div class="cell">525234234234</div>
<div class="cell ">41414124124</div>
<div class="cell ">13123123</div>
</div>
</div>
</div>
如果您想要在整行中显示内容,您可以尝试这个技巧,它更像是一个hack,而不是一个通用的解决方案。
#table {
display: table;
}
.group {
display: table-row-group;
}
.row,
.caption {
display: table-row;
}
.cell {
display: table-cell;
border: 1px solid grey;
padding: 5px
}
.caption>.cell {
border-right: none;
border-left: none;
}
.caption>.cell:last-child {
border-right: 1px solid grey;
}
.caption>.cell:first-child {
border-left: 1px solid grey;
}
.caption .cell:before {
content:"A";
font-size:0;
}
.caption .cell span {
position:absolute;
}
<div id="table">
<div class="group">
<div class="row">
<div class="cell">525234234234</div>
<div class="cell ">41414124124</div>
<div class="cell ">13123123</div>
</div>
<div class="caption">
<div class="cell"><span>some very long content to all row</span></div>
<div class="cell "></div>
<div class="cell "></div>
</div>
</div>
<div class="group">
<div class="row">
<div class="cell">525234234234</div>
<div class="cell ">41414124124</div>
<div class="cell ">13123123</div>
</div>
</div>
<div class="group">
<div class="row">
<div class="cell">525234234234</div>
<div class="cell ">41414124124</div>
<div class="cell ">13123123</div>
</div>
</div>
</div>
关于html - 行与行之间具有 colspan 的表格单元格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49192777/