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

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>

附上例子:

table表格列均分、合并单元格、表格自适应等属性_第1张图片

<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 ACtd>
                    tr>
                    <tr>
                        <td>诱虫方法td>
                        <td>主波长365nm、20W黑色诱虫灯光通量为2700lm-2920lmtd>
                        <td>药物诱剂(需自备药剂)td>
                    tr>
                    <tr>
                        <td>虫体标本处理td>
                        <td colspan="2">红外加热td>
                    tr>
                    <tr>
                        <td>虫处理面积td>
                        <td colspan="2">257.5mm*262mmtd>
                    tr>
                    <tr>
                        <td>撞击屏td>
                        <td colspan="2">互成120°角,单屏尺寸:长595±2mm,宽213±2mm,厚5mmtd>
                    tr>
                    <tr>
                        <td>红外虫体处理仓温度td>
                        <td colspan="2">工作15分钟后到达85±5℃td>
                    tr>
                    <tr>
                        <td>灯管启动时间td>
                        <td colspan="2">≤5Std>
                    tr>
                    <tr>
                        <td>网络摄像机td>
                        <td colspan="2">500W像素td>
                    tr>
                table>
body>

你可能感兴趣的:(css,html,html5,css3)