使用css实现带有四个圆角的表格--2019年9月6日
程序员文章站
2022-03-20 23:11:03
...
闲话不说，直接上代码：
实例
<!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"> <link rel="stylesheet" href="static/css/style.css"> <title>表格</title> </head> <body> <table> <!-- 标题 --> <caption>不知写什么随便来点的课程表</caption> <!-- 表头 --> <thead> <tr> <th>星期</th> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> </tr> </thead> <!-- 主体 --> <tbody> <tr> <td rowspan="3">上午<br>8:00 - 11:30</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 rowspan="2">下午<br>14:00 - 17:30</td> <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>
运行实例 »
点击 "运行实例" 按钮查看在线实例
对应的css样式表：
实例
/* 表格加上边框 */
table {
/* 考虑到边框重叠问题，所以分开写，一起组成年框 */
border-right: 1px solid #333;
border-bottom: 1px solid #333;
/* 设置单元格间距 */
border-spacing: 0;
/* border-collapse:collapse与border-radius不兼容 */
border-collapse: separate;
border-radius: 10px;
width: 800px;
margin: 20px auto;
}
/* 每个单元格加上边框 */
th,
td {
border-top: 1px solid #333;
border-left: 1px solid #333;
text-align: center;
padding: 10px;
}
/* 设置标题样式 */
table caption {
font-size: 1.3rem;
font-weight: bold;
margin-bottom: 15px;
}
/* >表示只选择thead的子元素tr，如果tr下面还有tr则不会被选择 */
table thead>tr:first-of-type {
background-color: lightgreen;
}
table thead>tr:first-of-type>th:first-of-type {
border-top-left-radius: 10px;
}
table thead>tr:first-of-type>th:last-of-type {
border-top-right-radius: 10px;
}
table tbody>tr:first-of-type>td:first-of-type {
background-color: wheat;
}
table tbody>tr:nth-last-of-type(2)>td:first-of-type {
background-color: lightcyan;
}
table tfoot>tr:last-of-type {
background-color: lightgray;
}
table tfoot>tr:last-of-type>td:first-of-type {
border-bottom-left-radius: 10px;
}
table tfoot>tr:last-of-type>td:last-of-type {
border-bottom-right-radius: 10px;
}
/* 美化 */
table {
box-shadow: 0 0 5px #888;
position: relative;
}
table:before {
/* 设置伪元素的内容，大小，位置 */
content: '';
width: 800px;
height: 288px;
position: absolute;
left: 0;
top: 42px;
/* 设置伪元素背景 */
background-image: url("../images/xx.jpg");
/* 图片拉伸充满整个区域 */
background-size: cover;
opacity: 0.3;
border-radius: 10px;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
总结
1. 如果想实现表格的圆角，border-collapse的值要设为separate。因为当border-collapse设置为collapse时与border-radius不兼容。
2. 关于边框线的设置需要注意，table的边框线会与th，td的重叠，即使设置border-spacing: 0会有叠加。
3. 使用伪类添加背景时需要添加圆角，否则最后背景会有突兀的直角。
4. 关于选择器技巧：例如table thead>tr:first-of-type，>表示只选择thead的子元素tr，如果tr下面还有tr则不会被选择，不会进行递归查询，提高效率。
上一篇： 常用的php集成环境有哪些