table表格列均分、合并单元格、表格自适应等属性

最新推荐文章于 2024-07-15 11:29:58 发布

Wxinin

最新推荐文章于 2024-07-15 11:29:58 发布

阅读量3.8k

点赞数 1

文章标签： css html html5 css3

本文链接：https://blog.csdn.net/weixin_44283589/article/details/114837276

版权

table表格列均分、合并单元格、表格自适应等属性

① 表格列均分: 直接加到table类名上,加了这个属性意味着table下面的td即使设置了宽度,也不会生效.
<style>
table {
	table-layout: fixed;
	}
</style>

② 合并单元格(行): 将代码colspan="数字"直接加到td标签上,数字表示当前的这个td合并了同一个tr中的几个单元格
```html
<body>
<td colspan="数字"></td>
</body>

③ 合并单元格(列): 将代码colspan="数字"直接加到td标签上,数字表示当前的这个td合并了几个tr中的单元格

```html
<body>
<td colspan="数字"></td>
</body>

④table表格允许td中的文字自动换行 (做pc端到移动端自适应经常会用到!)
```html
<style>
td 或table都可{
word-break: break-all;
}
⑤合并表格边框
table {
border-collapse: collapse;
}
⑥表格边框间距
table {
 border-spacing: 0;//通常设为0(具体看需要)
}

</style>

附上例子:

在这里插入图片描述

<style>
table{
    width: 100%;
    word-break: break-all;
    border-collapse: collapse;//合并表格边框
    border-spacing: 0;//表格边框间距
    border-left: 1px solid #0085B6;
    border-top: 1px solid  #0085B6;
}
table tr td{
    text-align: center;
    border: none;
    border-right: 1px solid  #0085B6;
    border-bottom: 1px solid  #0085B6;
    padding: 1.5%;
    color: #0085B6;
    width: 40%;
    word-break: break-all;
}
table tr img{
    width: 50%;
}
table tr td:nth-of-type(1){
    background-color: #0085B6;
    color: #ffffff;
    text-align: center;
    padding: 5px 15px;
    box-sizing: border-box;
    border-color: transparent transparent #fff transparent;
    width: 20%;
}
</style>
<body>
<table border="1" cellspacing="0">
                    <tr>
                        <td>产品名称</td>
                        <td>虫情测报灯</td>
                        <td>药物性诱虫情监测仪</td>
                    </tr>
                    <tr>
                        <td>产品图片</td>
                        <td><img src="1.png" alt=""></td>
                        <td><img src="2.png" alt=""></td>
                    </tr>
                    <tr>
                        <td>供电方式</td>
                        <td colspan="2">220V AC</td>
                    </tr>
                    <tr>
                        <td>诱虫方法</td>
                        <td>主波长365nm、20W黑色诱虫灯光通量为2700lm-2920lm</td>
                        <td>药物诱剂（需自备药剂）</td>
                    </tr>
                    <tr>
                        <td>虫体标本处理</td>
                        <td colspan="2">红外加热</td>
                    </tr>
                    <tr>
                        <td>虫处理面积</td>
                        <td colspan="2">257.5mm*262mm</td>
                    </tr>
                    <tr>
                        <td>撞击屏</td>
                        <td colspan="2">互成120°角，单屏尺寸：长595±2mm,宽213±2mm，厚5mm</td>
                    </tr>
                    <tr>
                        <td>红外虫体处理仓温度</td>
                        <td colspan="2">工作15分钟后到达85±5℃</td>
                    </tr>
                    <tr>
                        <td>灯管启动时间</td>
                        <td colspan="2">≤5S</td>
                    </tr>
                    <tr>
                        <td>网络摄像机</td>
                        <td colspan="2">500W像素</td>
                    </tr>
                </table>
</body>