实例
<!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="../0906/css/bg1.css"> <title>CSS表格作业</title> </head> <body> <table> <!-- 标题 --> <caption> <h3>合肥市科大附小一年级（3班）课程表</h3> <!-- 表头 --> <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>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> </tbody> <!-- 表位 --> <tfoot> <tr> <td>备注:</td> <td colspan="5">周末家长必须来学校帮助孩子打扫卫生</td> </tr> </tfoot> </caption> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
/* 给表格加上边框 */
table {
border: 1px solid #444444;
border-radius: 10px;
}
th,
td {
border: 1px solid #444444;
}
/* 折叠边框线 */
/* table {
border-collapse: collapse;
} */
/* 设置表格的宽度，文本居中 */
table {
width: 800px;
margin: 20px auto;
}
th,
td {
text-align: center;
padding: 10px;
}
/* 表格的标题设置 */
table caption {
font-size: 1.3rem;
font-weight: bolder;
margin-bottom: 15px;
}
/* 设置表头背景颜色 */
table thead tr:first-of-type {
background-color: lightgreen;
border-radius: 20px;
}
/* 设置主体第1列，第二行背景颜色 */
table tbody>tr:first-of-type>td:first-of-type {
background-color: wheat;
}
/* 设置主体第1列，倒数第二行背景颜色 */
table tbody>tr:nth-last-of-type(2)>td:first-of-type {
background-color: wheat;
}
/* 设置表位背景色 */
table tfoot>tr:first-of-type {
background-color: lightgray;
border-radius: 20px;
}
/* 设置表格阴影 */
table {
box-shadow: 2px 2px 2px #888888;
}
/* 用伪类类型选择器设置表格主体课程背景颜色 */
table tbody>tr:nth-of-type(1)>td,
table tbody>tr:nth-of-type(2)>td,
table tbody>tr:nth-of-type(3)>td,
table tbody>tr:nth-of-type(4)>td,
table tbody>tr:nth-of-type(5)>td {
background-color: goldenrod;
}
/* 学习用伪类元素设置背景图片 */
table {
position: relative;
}
table:before {
content: "";
width: 800px;
height: 288px;
position: absolute;
left: 0;
top: 96px;
/* 添加伪元素背景 */
background-image: url("http://pic65.nipic.com/file/20150417/3302065_045530101485_2.jpg");
opacity: 0.1;
border-radius: 10px;
}
/*设置表格圆角*/
table thead tr:nth-of-type(1)>th:nth-of-type(1) {
border-radius: 10px 0 0 0;
}
table thead tr:nth-of-type(1)>th:nth-of-type(6) {
border-radius: 0 10px 0 0;
}
table tfoot tr:nth-of-type(1)>td:nth-of-type(1) {
border-radius: 0 0 0 10px;
}
table tfoot tr:last-of-type td:last-of-type {
border-radius: 0 0 10px 0;
}
/* 去掉表格，表位，主体的外边框线 */
table thead tr th {
border-top: none;
}
table tbody tr td:last-of-type {
border-right: none;
}
table tfoot tr td {
border-bottom: none;
}
table thead tr:first-of-type>th:first-of-type {
border-left: none;
}
table thead tr:last-of-type>th:last-of-type {
border-right: none;
}
table tfoot tr:first-of-type>td:first-of-type {
border-left: none;
}
table tfoot tr:last-of-type>td:last-of-type {
border-right: none;
}
table tbody>tr:nth-of-type(1)>td:nth-of-type(1) {
border-left: none;
}
table tbody>tr:nth-of-type(4)>td:nth-of-type(1) {
border-left: none;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：去某度查询了用border-radius属性设置4圆角；
去掉了折叠边框线border-collapse不能和border-radius一起用，
不然后者会失效。
再单独把去掉表格第一排的左 上 右 边重叠线；主体，表位，第1列排的左 边重叠线，主体，表位，第6列排的右边重叠线，
最后是去掉 表位的下边重叠线！
