收藏
批改状态：合格
老师批语：写得非常的有舒适
案例：使用CSS制作一张带有四个圆角的表格
<!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>Document</title>
<style>
/* 需要单独画边，因为直接设置单元格的边线会重合很难看 */
/* 画出单元格左边和上边的线 */
table td,
th {
border-left: 1px solid #444444;
border-top: 1px solid #444444;
}
/* 最后一列右边的线*/
thead th:last-of-type,
tbody tr>td:last-of-type {
border-right: 1px solid #444444;
;
}
/* 最后一行下边的线 */
table tr:last-of-type td {
border-bottom: 1px solid #444444;
}
table {
margin: 0 auto;
/* 设置边与边之间没有距离 */
/* 这里不能设置border-collapse:collapase，因为border-collapse:collapse和border-radius不兼容。 */
border-collapse: separate;
border-spacing: 0;
width: 1000px;
height: 370px;
position: relative;
border-radius: 10px;
}
table caption {
font-size: 0.8rem;
margin-bottom: 10px;
}
/* 设置表头的颜色 */
thead {
background-color: #f8f8f8;
}
/* 设置表内文字的排列方式 */
th,
td {
text-align: center;
padding: 10px 10px;
}
/* 先设置所以td的颜色，在单独选择某td设置背景颜色，利用伪类 */
td {
background-color: #f9d1d1;
}
tr>td:nth-of-type(6) {
background-color: #d1f4f8;
}
tr>td:nth-of-type(8) {
background-color: #d1f4f8;
}
/*通过 css 方式向页面添加元素, 叫:伪元素*/
table:before {
content: "";
width: 1000px;
height: 370px;
position: absolute;
left: 0;
top: 79px;
/* 设置伪元素的样式 */
background-image: url(http://yun.buimo.com/ziyuan/images1/bg.jpg);
background-size: cover;
opacity: 0.2;
/* 图片设置圆角 */
border-radius: 10px;
}
/* 设置表格四周圆角 */
thead th:first-of-type {
border-top-left-radius: 10px;
}
thead th:last-of-type {
border-top-right-radius: 10px;
}
tr:last-of-type>td:first-of-type {
border-bottom-left-radius: 10px;
}
tr:last-of-type>td:last-of-type {
border-bottom-right-radius: 10px;
}
td {
margin: 0 0;
}
</style>
</head>
<body>
<table>
<!-- 标题 -->
<caption>
<h1>换货登记表</h1>
</caption>
<!-- 表头 -->
<thead>
<th>旺旺ID</th>
<th>***日期</th>
<th>***款式</th>
<th>换货原因</th>
<th>客户发回快递单号</th>
<th>物流状态</th>
<th>更换产品</th>
<th>换货发货日期</th>
</thead>
<!-- 主体 -->
<tbody>
<tr>
<td>张三</td>
<td>2019-09-04</td>
<td>大号 蓝色</td>
<td>感觉有点大</td>
<td>申通858545847585</td>
<td>已签收</td>
<td>中号 蓝色</td>
<td>2019-09-08</td>
</tr>
<tr>
<td>张三</td>
<td>2019-09-04</td>
<td>大号 蓝色</td>
<td>感觉有点大</td>
<td>申通858545847585</td>
<td>已签收</td>
<td>中号 蓝色</td>
<td>2019-09-08</td>
</tr>
<tr>
<td>张三</td>
<td>2019-09-04</td>
<td>大号 蓝色</td>
<td>感觉有点大</td>
<td>申通858545847585</td>
<td>已签收</td>
<td>中号 蓝色</td>
<td>2019-09-08</td>
</tr>
<tr>
<td>张三</td>
<td>2019-09-04</td>
<td>大号 蓝色</td>
<td>感觉有点大</td>
<td>申通858545847585</td>
<td>已签收</td>
<td>中号 蓝色</td>
<td>2019-09-08</td>
</tr>
<tr>
<td>张三</td>
<td>2019-09-04</td>
<td>大号 蓝色</td>
<td>感觉有点大</td>
<td>申通858545847585</td>
<td>已签收</td>
<td>中号 蓝色</td>
<td>2019-09-08</td>
</tr>
<tr>
<td>张三</td>
<td>2019-09-04</td>
<td>大号 蓝色</td>
<td>感觉有点大</td>
<td>申通858545847585</td>
<td>已签收</td>
<td>中号 蓝色</td>
<td>2019-09-08</td>
</tr>
<tr>
<td>张三</td>
<td>2019-09-04</td>
<td>大号 蓝色</td>
<td>感觉有点大</td>
<td>申通858545847585</td>
<td>已签收</td>
<td>中号 蓝色</td>
<td>2019-09-08</td>
</tr>
<tr>
<td>张三</td>
<td>2019-09-04</td>
<td>大号 蓝色</td>
<td>感觉有点大</td>
<td>申通858545847585</td>
<td>已签收</td>
<td>中号 蓝色</td>
<td>2019-09-08</td>
</tr>
</tbody>
</table>
</body>
</html>运行效果如图所示：
总结：
在对表格进行圆角设计的时候我们需要注意border-collapse:collapse和border-radius不兼容，需要设置border-collapse: separate;border-spacing: 0;再对各边线分别设置，不然会重叠不***，线体较粗。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
