Html 显示设置为表格单元格的元素的 Colspan/Rowspan
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9277661/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Colspan/Rowspan for elements whose display is set to table-cell
提问by Madara's Ghost
I have the following code:
我有以下代码：
<div class="table">
<div class="row">
<div class="cell">Cell</div>
<div class="cell">Cell</div>
</div>
<div class="row">
<div class="cell colspan2">Cell</div>
</div>
</div>
<style>
.table {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
}
.colspan2 {
/* What to do here? */
}
</style>
Pretty straightforward. How do I add a colspan (or the equivalent of colspan) for elements with display: table-cell?
很简单。如何为带有 的元素添加 colspan（或等效的 colspan）display: table-cell？
采纳答案by Russell Zahniser
As far as I know, the lack of colspan/rowspan is just one of the limitations of display:table. See this post:
据我所知，缺少 colspan/rowspan 只是display:table. 看到这个帖子：
http://www.onenaught.com/posts/201/use-css-displaytable-for-layout
http://www.onenaught.com/posts/201/use-css-displaytable-for-layout
回答by F-3000
Since OP does not explicitlyrule that solution must be pure CSS, I'll be stubborn and throw in my workaround I figured out today, especially since it's much more elegant than having a table inside a table.
由于 OP 没有明确规定解决方案必须是纯 CSS，因此我会很固执，并提出我今天想出的解决方法，尤其是因为它比在表格中放置表格要优雅得多。
Example equals to <table> with two cells per row and two rows, where the cell in the second row is a td with colspan="2".
示例等于 <table> 每行两个单元格和两行，其中第二行中的单元格是带有colspan="2".
I have tested this with Iceweasel 20, Firefox 23 and IE 10.
我已经用 Iceweasel 20、Firefox 23 和 IE 10 对此进行了测试。
div.table {
display: table;
width: 100px;
background-color: lightblue;
border-collapse: collapse;
border: 1px solid red;
}
div.row {
display: table-row;
}
div.cell {
display: table-cell;
border: 1px solid red;
}
div.colspan,
div.colspan+div.cell {
border: 0;
}
div.colspan>div {
width: 1px;
}
div.colspan>div>div {
position: relative;
width: 99px;
overflow: hidden;
}<div class="table">
<div class="row">
<div class="cell">cell 1</div>
<div class="cell">cell 2</div>
</div>
<div class="row">
<div class="cell colspan">
<div><div>
cell 3
</div></div>
</div>
<div class="cell"></div>
</div>
</div>Live action (demo) here.
现场表演（演示）在这里。
EDIT: I finetuned the code to be more printer-friendly, as they leave background-colors out by default. I also created rowspan-demo, inspired by late answer here.
编辑：我对代码进行了微调，使其对打印机更友好，因为它们默认情况下不使用背景颜色。我还创建了rowspan-demo，灵感来自这里的迟到答案。
回答by Philippe97
A simpler solution that works for me in Chrome 30 :
在 Chrome 30 中对我有用的更简单的解决方案：
Colspan can be emulated by using display: tableinstead of display: table-rowfor the rows :
Colspan 可以通过使用display: table而不是display: table-rowfor the rows来模拟：
.table {
display: block;
}
.row {
display: table;
width: 100%;
}
.cell {
display: table-cell;
}
.row.colspan2 {/* You'll have to add the 'colspan2' class to the row, and remove the unused <div class=cell> inside it */
display: block;
}
The only pitfall is that the cells of stacked rows won't align vertically, as they're from different tables.
唯一的缺陷是堆叠行的单元格不会垂直对齐，因为它们来自不同的表。
回答by stacigh
If you're looking for a straight CSS way to simulate a colspan, you could use display: table-caption.
如果您正在寻找一种直接的 CSS 方式来模拟 colspan，则可以使用display: table-caption.
.table {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
border: 1px solid #000;
}
.colspan2 {
/* What to do here? */
display: table-caption;
}<div class="table">
<div class="row">
<div class="cell">Cell</div>
<div class="cell">Cell</div>
</div>
<div class="row">
<div class="cell colspan2">Cell</div>
</div>
</div>回答by Curt
Simply use a table.
只需使用一个table.
table's are only frowned upon when being used for layout purposes.
表格仅在用于布局目的时才会皱眉。
This seems like tabular data (rows/columns of data). Therefore I would recommend using a table.
这似乎是表格数据（数据的行/列）。因此，我建议使用table.
See my answer to this questionfor more information:
有关更多信息，请参阅我对这个问题的回答：
回答by Tim
Here's one way to span columns in CSS I used for my own situation.
这是我在自己的情况下使用的一种跨 CSS 列的方法。
https://jsfiddle.net/mb8npttu/
https://jsfiddle.net/mb8npttu/
<div class='table'>
<div class='row'>
<div class='cell colspan'>
spanning
</div>
<div class='cell'></div>
<div class='cell'></div>
</div>
<div class='row'>
<div class='cell'>1</div>
<div class='cell'>2</div>
<div class='cell'>3</div>
</div>
</div>
<style>
.table { display:table; }
.row { display:table-row; }
.cell { display:table-cell; }
.colspan { max-width:1px; overflow:visible; }
</style>
回答by J.T. Houtenbos
There is a solution to make the colspan the widht of the entire table. You can not use this technique to colspan a part of the table.
有一个解决方案可以使 colspan 成为整个表格的宽度。您不能使用此技术来跨表的一部分。
Code:
代码：
*{
box-sizing: border-box;
}
.table {
display: table;
position: relative;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
border: 1px solid red;
padding: 5px;
text-align: center;
}
.colspan {
position: absolute;
left: 0;
width: 100%;
}
.dummycell {
border-color: transparent;
}<div class="table">
<div class="row">
<div class="cell">Cell</div>
<div class="cell">Cell</div>
</div>
<div class="row">
<div class="cell dummycell"> </div>
<div class="cell colspan">Cell</div>
</div>
<div class="row">
<div class="cell">Cell</div>
<div class="cell">Cell</div>
</div>
</div>Explanation:
解释：
We use position absolute on the colspan to make it the full width of the table. The table itself needs position relative. We make use of a dummycell to maintain the height of the rows, position absolute does not follow the flow of the document.
我们在 colspan 上使用 position absolute 使其成为表格的全宽。桌子本身需要相对位置。我们使用了一个 dummycell 来保持行的高度，绝对位置不遵循文档的流程。
Of course you can also use flexbox and grid to tackle this problem these days.
当然，现在你也可以使用 flexbox 和 grid 来解决这个问题。
回答by bderevyaga
CSS
CSS
.tablewrapper {
position: relative;
}
.table {
display: table;
position: relative
}
.row {
display: table-row;
}
.cell {
border: 1px solid red;
display: table-cell;
}
.cell.empty
{
border: none;
width: 100px;
}
.cell.rowspanned {
position: absolute;
top: 0;
bottom: 0;
width: 100px;
}
.cell.colspan {
position: absolute;
left: 0;
right: 0;
}
HTML
HTML
<div class="tablewrapper">
<div class="table">
<div class="row">
<div class="cell rowspanned">
Center
</div>
<div class="cell">
Top right
</div>
</div>
<div class="row">
<div class="cell empty"></div>
<div class="cell colspan">
Bottom right
</div>
</div>
</div>
</div>
回答by naXa
You can't achieve this at present.
你目前无法做到这一点。
AFAIK this would be covered by CSS Tables, a specification which appears to currently be at "work in progress" state.
AFAIK 这将由CSS Tables涵盖，该规范目前似乎处于“正在进行中”状态。
回答by pkachhia
You can try this solution, where you can find how to apply colspan using div https://codepen.io/pkachhia/pen/JyWMxY
您可以尝试此解决方案，您可以在其中找到如何使用 div https://codepen.io/pkachhia/pen/JyWMxY应用 colspan
HTML:
HTML：
<div class="div_format">
<div class="divTable">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell cell_lable">Project Name</div>
<div class="divTableCell cell_value">: Testing Project</div>
<div class="divTableCell cell_lable">Project Type</div>
<div class="divTableCell cell_value">: Web application</div>
</div>
<div class="divTableRow">
<div class="divTableCell cell_lable">Version</div>
<div class="divTableCell cell_value">: 1.0.0</div>
<div class="divTableCell cell_lable">Start Time</div>
<div class="divTableCell cell_value">: 2016-07-10 11:00:21</div>
</div>
<div class="divTableRow">
<div class="divTableCell cell_lable">Document Version</div>
<div class="divTableCell cell_value">: 2.0.0</div>
<div class="divTableCell cell_lable">End Time</div>
<div class="divTableCell cell_value">: 2017-07-10 11:00:23</div>
</div>
<div class="divTableRow">
<div class="divTableCell cell_lable">Document Revision</div>
<div class="divTableCell cell_value">: 3</div>
<div class="divTableCell cell_lable">Overall Result</div>
<div class="divTableCell cell_value txt_bold txt_success">: Passed</div>
</div>
</div>
<div class="divCaptionRow">
<div class="divCaptionlabel">Description</div>
<div class="divCaptionValue">: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</div>
</div>
</div>
</div>
CSS:
CSS：
body {
font-family: arial
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.div_format {
width: 100%;
display: inline-block;
position: relative
}
.divTable {
display: table;
width: 100%;
}
.divTableRow {
display: table-row
}
.divTableHeading {
background-color: #EEE;
display: table-header-group
}
.divTableCell,
.divTableHead {
display: table-cell;
padding: 10px
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
font-weight: bold
}
.divTableFoot {
background-color: #EEE;
display: table-footer-group;
font-weight: bold
}
.divTableBody {
display: table-row-group
}
.divCaptionRow{
display: table-caption;
caption-side: bottom;
width: 100%;
}
.divCaptionlabel{
caption-side: bottom;
display: inline-block;
background: #ccc;
padding: 10px;
width: 15.6%;
margin-left: 10px;
color: #727272;
}
.divCaptionValue{
float: right;
width: 83%;
padding: 10px 1px;
border-bottom: 1px solid #dddddd;
border-right: 10px solid #fff;
color: #5f5f5f;
text-align: left;
}
.cell_lable {
background: #d0d0d0;
border-bottom: 1px solid #ffffff;
border-left: 10px solid #ffffff;
border-right: 10px solid #fff;
width: 15%;
color: #727272;
}
.cell_value {
border-bottom: 1px solid #dddddd;
width: 30%;
border-right: 10px solid #fff;
color: #5f5f5f;
}
