table的边框圆角设置
在给table设置边框的时候，直接设置table-radius，是无效的。原因是css3的border不支持table-radius属性。若要想给rtable设置radius属性，可以使用border-collapse: separate；属性。用border-radius形成圆角，可以，但是在table表单中border-collapse:collapse和border-radius不相容，使用border-collapse:separate可以实现圆角，但单元格边框不会合并。分别给table外边框和th，td设置边框线。然受使用伪类选择器，分别给四个边角的th或td设置border-top-left-radius，border-top-right-radius，border-bottom-left-radius，border-bottom-right-radius属性.如图：
实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--<link rel="stylesheet" href="static/css/style2.css">-->
<title>html控制表格</title>
<style>
table {
/*border-collapse: collapse;*/
/*实现边框圆角*/
border-collapse: separate;
border-spacing: 0;
width:800px;
/*border:1px solid #444;*/
}
/*单独给th添加上边框*/
table tr th {
border-top:1px solid #d4d8da;
}
/*给所有的th和td添加右边框+下边框*/
table tr th, table tbody tr td ,table tfoot tr td{
border-right: 1px solid #d4d8da;
border-bottom: 1px solid #d4d8da;
text-align: center;
padding: 10px;
}
/*给表头行的所有th加上左边框，
第一行的第一个合并的单元格添加左边框，
第5行的第一个合并过的单元格添加左边框*/
table tr th:first-child, table tr:first-child td:first-child,
table tr:nth-of-type(5) td:first-child {
border-left: 1px solid #d4d8da;
}
/*给左边第一个th设置左上边框圆角*/
table tr:first-child th:first-child {
border-top-left-radius: 15px;
}
/*给左边/最后一个th设置右上边框圆角*/
table tr:first-child th:last-child {
border-top-right-radius: 15px;
}
/*给底部的tfoot的第一个td设置左下圆角*/
table tfoot tr:last-child td:first-child {
border-bottom-left-radius: 15px;
}
/*给tfoot的最后一个td设置右下圆角*/
table tfoot tr:last-child td:last-child {
border-bottom-right-radius: 15px;
}
/*table tfoot tr td {*/
/*border-top: 1px solid #444;*/
/*}*/
/*table tr th,table tr td {*/
/*border-right: 1px solid #444;*/
/*border-bottom: 1px solid #444;*/
/*text-align: center;*/
/*padding: 10px;*/
/*}*/
/*table thead tr th {*/
/*border-top: 1px solid #444;*/
/*}*/
/*table thead tr th:nth-of-type(1),table tbody tr:nth-of-type(1) td:nth-of-type(1),table tbody tr:nth-of-type(5) td:nth-of-type(1),table tfoot tr th:nth-of-type(1) td:nth-of-type(1){*/
/*border-left: 1px solid #444;*/
/*}*/
/*th {*/
/*border-bottom: none;*/
/*}*/
/*table tr:first-child th:first-child {*/
/*border-top-left-radius: 15px;*/
/*}*/
/*table tr:first-child th:last-child {*/
/*border-top-right-radius: 15px;*/
/*}*/
/*折叠边框线*/
table caption {
font-size: 1.3em;
font-weight: 700;
margin-bottom: 15px;
}
table thead >tr:first-of-type {
/*background-color: lawngreen;*/
}
table tbody >tr:first-of-type >td:first-of-type {
/*background-color: wheat;*/
}
table tbody >tr:nth-of-type(5) >td:first-of-type {
/*background-color: lightblue;*/
}
table tfoot tr td {
/*background-color: #ccc;*/
}
/*美化表格*/
table {
/*box-shadow: 2px 2px 2px #888888;*/
}
/*通过css 方式向页面添加元素，伪元素*/
/*table:after {*/
/*content: "hello !";*/
/*}*/
table:before {
/*设置一下伪元素背景*/
content: '';
width:800px;
height: 368px;
position: absolute;
left:7px;
top: 115px;
border-radius: 15px;
/*设置伪元素背景*/
/*background-image: url("../img/111.jpg");*/
background-size: cover;
opacity: 0.5;
}
</style>
</head>
<body>
<table>
<!--标题-->
<caption><h2>课程表</h2></caption>
<!--表头-->
<thead>
<tr>
<th>星期</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="4" >上午</td>
<td>课程</td>
<td>课程</td>
<td>课程</td>
<td>课程</td>
<td>课程</td>
</tr>
<tr>
<td>课程</td>
<td>课程</td>
<td>课程</td>
<td>课程</td>
<td>课程</td>
</tr>
<tr>
<td>课程</td>
<td>课程</td>
<td>课程</td>
<td>课程</td>
<td>课程</td>
</tr>
<tr>
<td>课程</td>
<td>课程</td>
<td>课程</td>
<td>课程</td>
<td>课程</td>
</tr>
<tr>
<td rowspan="3">下午</td>
<td>课程</td>
<td>课程</td>
<td>课程</td>
<td>课程</td>
<td>课程</td>
</tr>
<tr>
<td>课程</td>
<td>课程</td>
<td>课程</td>
<td>课程</td>
<td>课程</td>
</tr>
<tr>
<td>课程</td>
<td>课程</td>
<td>课程</td>
<td>课程</td>
<td>课程</td>
</tr>
</tbody>
<tfoot><tr>
<td>备注</td>
<td colspan="5">周五要大扫除</td>
</tr></tfoot>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
