实例
/* 设置表格边框实线
折叠边框线
表格上下20像素 左右自动居中 文字居中
表格加阴影 */
/* 表格设置必须去掉 border-collapse: collapse;*/
table {
border: 1px solid black;
/* border-collapse: collapse; */
border-spacing: 0;
border-radius: 20px;
width: 800px;
margin: 20px auto;
box-shadow: 2px 2px 2px;
position: relative;
}
/* 群组选择器 设置单元格边框
设置单元格的样式 ,文字居中，文字和单元格之间距离10px*/
th,
td {
border: 1px solid #444444;
text-align: center;
padding: 10px;
margin: 0;
padding: 10px;
}
/* 表头字体大小、加粗 */
table caption {
font-size: 1.3rem;
font-weight: bolder;
/* margin-bottom: 1px; */
}
/* 设置表格第一行颜色
指定单元格第二行第一列颜色
指定表格倒数第二行第一列颜色
页脚颜色 */
table thead>tr:first-of-type {
background-color: lightgreen;
}
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-child {
background-color: lightgray;
} */
table tfoot>tr:first-of-type {
background-color: lightgray;
}
table:before {
content: "";
width: 800px;
height: 302px;
position: absolute;
left: 0;
top: 90px;
background-image: url("xx.jpg");
background-size: cover;
border-radius: 15px;
opacity: 0.4;
}
/* 设置表格左边-右上角圆角 */
/* 设置表格右边-右上角圆角 */
table thead>tr:nth-of-type(1)>th:nth-of-type(1) {
border-top-left-radius: 20px;
}
table thead>tr:nth-of-type(1)>th:nth-of-type(6) {
border-top-right-radius: 15px;
}
/* 设置表格右边边-右下角圆角 */
/* 设置表格左边-左下角圆角 */
table tfoot>tr:nth-of-type(1)>td:nth-of-type(1) {
border-bottom-left-radius: 12px;
}
table tfoot>tr:nth-of-type(1)>td:nth-of-type(2) {
border-bottom-right-radius: 12px;
}运行
实例
<!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="style-03.css"> <title>css控制表格样式制作课程表</title> </head> <body> <table> <!-- cellpadding="10"把表格单元边界与单元内容之间的间距设置为 10 像素， --> <!-- cellspacing="0"表格单元格间距设置为 0 像素 --> <!-- 标题 --> <caption> <h2>黄山市实验小学2019年秋季一年级课程表</h2> </caption> <!-- 表头 --> <thead> <tr> <th>星期</th> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> </tr> </thead> <!-- 主体 --> <tbody> <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> <tr> <td rowspan="2">下午</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> </tbody> <tfoot> <tr> <td>备注：</td> <td colspan="5">上午时间8:00~11:30 下午时间 2:00~4:30</td> </tr> </tfoot> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
点击 "运行实例" 按钮查看在线实例
总结：
table表格设置必须去掉 border-collapse: collapse; 再加boder-radius 圆角,
依次设置 表格的 左上 , 左下 右上 , 右下 圆角 。