html代码:
<div class="table">
<div class="col">第一个单元格</div>
<div class="col">第二个单元格</div>
</div>
CSS代码:
.table{width:500pxheight:150pxmargin:0px autoborder:1px solid #000border-left-width:0}
.col{width:249pxheight:100%border-left:1px solid #000float:left}
demo效果截图如下:
<div style="width:100%">一行</div><div style="width:50%float:left">左</div>
<div style="width:50%float:left">右</div>
比如第一行3列均分,第二行二列均分,就找第一行列数和第二行列数的最小公倍数,如以下这个,最小公倍数就是标题跨列数:6,第一行每一单元格跨列2 第二行跨列3,刚好。
<table class="m-pnjctable">
<tr>
<td colspan="6">我是一个标题</td>
</tr>
<tr>
<th colspan="2">我是第一行第一列</th>
<th colspan="2">我是第一行第二列</th>
<th colspan="2">我是第一行第三列</th>
</tr>
<tr>
<th colspan="3">我是第二行第一列</th>
<th colspan="3">我是第二行第二列</th>
</tr>
</table>
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)