带圆角的table表格及美化
用CSS来实现表格的美化 , 给table加圆角的时候border-radius发现不起作用 , border-collapse 属性设置表格的边框是否被合并为一个单一的边框 , 要将这个属性设为默认分开 border-collapse: separate
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>带圆角的table表格</title>
<style>
table {
margin: 0 auto;
/* separate : 边框独立,默认样式 */
border-collapse: separate;
/* border: 1px solid #333; */
/* 这里不能直接写border的边框,会有边框1px的重叠 */
border-spacing: 0;
border-radius: 15px;
border-right: 1px solid #333;
border-bottom: 1px solid #333;
}
table td {
border-left: 1px solid #333;
border-top: 1px solid #333;
}
table th {
border-left: 1px solid #333;
border-top: 1px solid #333;
}
/* 单独进行四个角上表格的圆角设置 */
thead>tr:nth-of-type(1)>th:nth-of-type(1) {
border-top-left-radius: 15px;
}
thead>tr:nth-of-type(1)>th:last-of-type {
border-top-right-radius: 15px;
}
tfoot>tr:nth-of-type(1)>td:nth-of-type(1) {
border-bottom-left-radius: 15px;
}
tfoot>tr:nth-of-type(1)>td:last-of-type {
border-bottom-right-radius: 15px;
}
thead {
background: lightblue;
}
tbody {
background: lightyellow;
}
tfoot {
background: lightgrey;
}
</style>
</head>
<body>
<div>
<table width="700" cellpadding="10">
<caption>产品交接表</caption>
<thead>
<tr>
<th rowspan="2">产品名称</th>
<th rowspan="2">规格型号</th>
<th rowspan="2">完工状态</th>
<th colspan="3">交接数量</th>
<th rowspan="2">件/公 斤</th>
</tr>
<tr>
<th>合格品(件)</th>
<th>不合格品(件)</th>
<th>公 斤</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="7" align="center">交接情况</td>
</tr>
<tr>
<td>交货部门</td>
<td colspan="2"></td>
<td>班次</td>
<td></td>
<td>交货人</td>
<td></td>
</tr>
<tr>
<td>交货部门</td>
<td colspan="2"></td>
<td>班次</td>
<td></td>
<td>交货人</td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr style="height: 80px;">
<td colspan="5">验收检验记录</td>
<td>检验员</td>
<td></td>
</tr>
</tfoot>
</table>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
小结 : 在用CSS样式控制表格边框的时候不能直接写border的样式 , 会出现边框重叠的现象 , 单独写出右边和下边框 , 再分别给出th , td 设置左边和上边框 。 border-collapse 属性要设为默认separate，整个表格的四周，也都是小格子，要单独去设置它们的圆角。