CSS - rowspan 类似效果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13585789/
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
CSS - rowspan like effect
提问by devSuper
I simply want to achieve the effect where the left column has two merged rows and the one on right has none. How can I achieve this layout?
我只是想达到左列有两个合并行而右列没有合并行的效果。我怎样才能实现这种布局？
The html table will look like -
html 表看起来像 -
<table border="1" >
<tr>
<td rowspan="2">Div 1</td>
<td> Div 2 </td>
</tr>
<tr>
<td>Div3</td>
</tr>
</table>??????
Edit: I want to acheive this using Div. I would be putting User control in each div element. It is important that Div3 starts below div2 but not below Div1.
编辑：我想使用 Div 来实现这一点。我会将用户控件放在每个 div 元素中。重要的是 Div3 从低于 div2 但不低于 Div1 开始。
[Sorry, this is first post so cannot add image]
[抱歉，这是第一次发帖，无法添加图片]
Thanks.
谢谢。
采纳答案by harikrishnan.n0077
CSS
CSS
body {
margin: 0;
padding: 50px;
background-color: #FFFFFF;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
}
.tablewrapper {
position: relative;
}
.table {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
border: 1px solid red;
padding: 1em;
}
.cell.empty
{
border: none;
width: 100px;
}
.cell.rowspanned {
position: absolute;
top: 0;
bottom: 0;
width: 100px;
}
<div class="tablewrapper">
<div class="table">
<div class="row">
<div class="cell">
Top left
</div>
<div class="rowspanned cell">
Center
</div>
<div class="cell">
Top right
</div>
</div>
<div class="row">
<div class="cell">
Bottom left
</div>
<div class="empty cell"></div>
<div class="cell">
Bottom right
</div>
</div>
</div>
</div>
Demo: http://www.sitepoint.com/rowspans-colspans-in-css-tables/
演示：http: //www.sitepoint.com/rowspans-colspans-in-css-tables/
