html中,我要做一个一行两列的表格,怎么控制第一个单元格的宽度在100px

html中,我要做一个一行两列的表格,怎么控制第一个单元格的宽度在100px,第1张

要使用div做一个表格,主要需要应用到css中的border表框属性,这样看起来才像是一个表格。示例代码如下:

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>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7367386.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-04
下一篇 2023-04-04

发表评论

登录后才能评论

评论列表(0条)

保存