我只是想实现左列有两行合并而右列没有的效果。我怎样才能实现这种布局?
html 表格看起来像 -
<table border="1" >
<tr>
<td rowspan="2">Div 1</td>
<td> Div 2 </td>
</tr>
<tr>
<td>Div3</td>
</tr>
</table>
编辑:我想使用 Div 来实现这一点。我会在每个 div 元素中放置用户控件。重要的是 Div3 从 div2 以下但不低于 Div1 开始。
[抱歉,这是第一次发帖,所以不能添加图片]
谢谢。
最佳答案
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>
演示:http://www.sitepoint.com/rowspans-colspans-in-css-tables/
关于CSS - 类似行跨度的效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13585789/