收藏
批改状态：合格
老师批语：记住这个套路
<!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">
<style>
table {
border: 1px solid black;
box-shadow: 2px 2px 2px;
border-spacing: 0;
border-radius: 20px;
margin: 0 auto;
width: 800px;
position: relative;
}
th,
td {
border: 1px solid black;
text-align: center;
margin: 0;
padding: 0;
font-weight: bold;
}
th {
height: 30px;
line-height: 30px;
}
td {
height: 30px;
line-height: 30px;
font-size: 15px;
}
/* 设置标题 */
caption {
font-size: 1.6em;
font-weight: lighter;
margin-bottom: 12px;
}
/* 设置表头背景 字体颜色 */
tr>th {
background-color: burlywood;
color: black;
}
/* 设置 第一列 周日-周四 合并表格样式 */
table tbody>tr:nth-of-type(1)>td:nth-of-type(1) {
background-color: bisque;
color: black;
font-weight: bold;
}
/* 设置 第一列 周五-周六 合并表格样式 */
table tbody>tr:nth-of-type(3)>td:nth-of-type(1) {
background-color: bisque;
color: black;
font-weight: bold;
}
/* 设置最下面 备注行 背景 */
table tbody>tr:last-of-type {
background-color: darkgray;
}
/* 设置 第一列 的 备注 字体 */
table tbody>tr:nth-of-type(5)>td:nth-of-type(1) {
font-weight: bolder;
}
/* 设置备注 框 后面 内容的 样式 */
table tbody>tr:nth-of-type(5)>td:nth-of-type(2) {
text-align: left;
padding-left: 15px;
font-weight: bold;
color: chartreuse
}
/* 设置 背景图片 */
table:before {
content: "";
width: 800px;
height: 311px;
position: absolute;
left: 0;
top: 48px;
background-image: url("https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2180652589,258881584&fm=26&gp=0.jpg");
background-size: cover;
border-radius: 15px;
opacity: 0.4;
}
/* 设置表格左边-左上角圆角 */
table tbody>tr:nth-of-type(1)>th:nth-of-type(1) {
border-top-left-radius: 15px;
}
/* 设置表格右边-右上圆角 */
table tbody>tr:nth-of-type(1)>th:last-of-type {
border-top-right-radius: 15px;
}
/* 设置表格左边-左下角圆角 */
table tbody>tr:nth-of-type(5)>td:nth-of-type(1) {
border-bottom-left-radius: 15px;
}
/* 设置表格右边-右下角圆角 */
table tbody>tr:nth-of-type(5)>td:nth-of-type(2) {
border-bottom-right-radius: 15px;
}
</style>
<title>Document</title>
</head>
<body>
<table>
<thead>
<caption>***包厢时段表</caption>
<tr>
<th id="top">星期</th>
<th>包厢时段</th>
<th>至尊卡</th>
<th>钻石卡</th>
<th>金卡</th>
<th>银卡</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">周日<br>|<br>周四</td>
<td>黄金档<br>18:00-00:00</td>
<td>4折</td>
<td>5折</td>
<td>6折</td>
<td>7折</td>
</tr>
<tr>
<td>夜猫档<br>00:00-打烊</td>
<td>4折</td>
<td>5折</td>
<td>6折</td>
<td>7折</td>
</tr>
<tr>
<td rowspan="2">周五<br>|<br>周六</td>
<td>黄金档<br>18:00-00:00</td>
<td>4折</td>
<td>5折</td>
<td>6折</td>
<td>7折</td>
</tr>
<tr>
<td>夜猫档<br>00:00-打烊</td>
<td>4折</td>
<td>5折</td>
<td>6折</td>
<td>7折</td>
</tr>
<tr>
<td>备注</td>
<td colspan="5">一周内接受定位包厢保留10分钟,逾时取消保留</td>
</tr>
</tbody>
</table>
</body>
</html>点击 "运行实例" 按钮查看在线实例
总结:
table ()设置 border-collapse: separate 以及 boder-radius 圆角,)
再用 border-spacing 设置 table 相邻单元格的边框间 为0
最后 依次设置 左( 左上 , 左下 )圆角 右( 右上 , 右下 )圆角
不知道此种方法 有没有什么不妥当的地方,自己的理解也只能做到如此了
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
