![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：原生表格本不支持的, 大多是通过一些Hack方法实现, 期待更新
Collection
Collection
使用CSS制作一张带有四个圆角的表格，需要将表格border-collapse: collapse;修改成border-collapse: separate;border-spacing: 0;在用选择器选择表格的四个角，添加radius属性。
<!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> <th>星期六</th> <th>星期日</th> </tr> </thead> <!-- 表格主体 --> <tbody> <tr> <td>早餐 - 8:00</td> <td>鸡蛋</td> <td>千层饼</td> <td>牛奶</td> <td>面包</td> <td>豆浆</td> <td>包子</td> <td>油条</td> </tr> <tr> <td>午餐 - 12:00</td> <td>黄焖鸡米饭</td> <td>青椒肉丝</td> <td>意大利面</td> <td>烤鸭</td> <td>西红柿炒蛋</td> <td>大闸蟹</td> <td>火鸡</td> </tr> <tr> <td rowspan="2">晚餐 - 18:00</td> <td>油炸腰子</td> <td>油炸老鼠</td> <td>油炸黄鳝</td> <td>油炸蜗牛</td> <td>油炸青蛙</td> <td>油炸蟑螂</td> <td>油炸毛毛虫</td> </tr> <tr> <td>二锅头</td> <td>葡萄酒</td> <td>非常可乐</td> <td>百事可乐</td> <td>茅台</td> <td>黄酒</td> <td>江小白</td> </tr> </tbody> <!-- 表格尾巴 --> <tfoot> <tr> <td>总结</td> <td colspan="7">吃这么多，能活过一周算你狠！！!</td> </tr> </tfoot> </table> </body> </html>
点击 "运行实例" 按钮查看在线实例
table {
/* border: 1px solid #444444; */
border-collapse: separate;
border-spacing: 0;
/* border-collapse: collapse; */
margin: 20px auto;
width: 800px;
box-shadow: 2px 2px 2px #4b3535;
border-radius: 10px;
}
table thead>tr:first-child>th:first-child {
border-top-left-radius: 10px;
}
table thead>tr:first-child>th:last-child {
border-top-right-radius: 10px;
}
table tfoot>tr:first-child>td:first-child {
border-bottom-left-radius: 10px;
}
table tfoot>tr:first-child>td:last-child {
border-bottom-right-radius: 10px;
}点击 "运行实例" 按钮查看在线实例
将border-collapse: collapse;修改成border-collapse: separate;border-spacing: 0;后，中间的线条有点粗，圆角是实现了；可能还有更好的方法。