使用CSS制作一张带有四个圆角的表格
代码如下：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <link rel="stylesheet" href="css/style1.css"> -->
<style>
table{
border:1px solid black;
/*设置表格边框*/
width:800px;
margin:20px auto;
/*设置宽度及外边距*/
border-collapse: separate;
/*边框合并模型默认*/
border-spacing: 0;
/*设置相邻单元格间距*/
border-radius: 12px;
/*设置表格圆角*/
}
th, td{
border:1px solid black;
text-align:center;
padding:10px;
/*设置单元格边框、文本对齐、内边距*/
}
table caption{
font-size:1.5em;
font-weight:bolder;
margin-bottom:15px;
/*设置标题文本*/
}
table thead > tr:first-of-type > th{
text-align: left;
/*第一个表头对齐设置左对齐*/
}
table thead > tr:first-of-type > th:first-of-type{
border-right: none;
/*取消单元格右边线*/
}
table thead > tr:first-of-type > th:last-of-type{
border-left: none;
/*取消单元格左边线*/
}
table thead > tr:nth-of-type(2) {
background-color: #3F51B5;
color: #fff;
/*设置第二个表头背景色和文本颜色*/
}
table thead > tr:last-of-type > th:first-of-type{
width: 34px;
/*设置第一列宽度*/
}
table thead > tr:last-of-type > th:nth-of-type(2){
width: 149px;
/*设置第二列宽度*/
}
table thead > tr:last-of-type > th:nth-of-type(3){
width: 49px;
/*设置第三列宽度*/
}
table thead > tr:last-of-type > th:nth-of-type(4){
width: 49px;
/*设置第四列宽度*/
}
table thead > tr:last-of-type > th:nth-of-type(5){
width: 49px;
/*设置第五列宽度*/
}
table thead > tr:last-of-type > th:nth-of-type(6){
width: 49px;
/*设置第六列宽度*/
}
table thead > tr:last-of-type > th:nth-of-type(7){
width: 49px;
/*设置第七列宽度*/
/*第八列自动挤压*/
}
table tbody > tr:nth-of-type(even){
background-color: #C5CAE9;
/*设置tbody中偶数行的背景色*/
}
table tfoot > tr:first-of-type > td{
background-color: lightgray;
font-weight:bolder;
/*设置tfoot 下第一个tr下面所有的td字体加粗，也就是表格的总金额*/
}
table tfoot > tr:nth-of-type(2) > td:nth-of-type(odd){
background-color: lightgray;
font-weight:bolder;
/*设置tfoot 下第二个tr下面奇数的td字体加粗*/
}
table tfoot > tr:last-of-type > td:first-of-type{
background-color: lightgray;
font-weight:bolder;
/*设置tfoot 最后一个tr下面第一个的td字体加粗*/
}
table thead > tr:first-child > th:first-child {
border-top-left-radius: 12px;
}
/*左上圆角,thead里第一个tr里的第一个th单元格*/
table thead > tr:first-child > th:last-child {
border-top-right-radius: 12px;
}
/*右上圆角,thead里第一个tr里的最后一个th单元格*/
table tfoot > tr:last-child > td:first-child {
border-bottom-left-radius: 12px;
}
/*左下圆角,tfoot 里最后一个tr里的第一个td单元格*/
table tfoot > tr:last-child > td:last-child {
border-bottom-right-radius: 12px;
}
/*右下圆角,tfoot 里最后一个tr里的最后一个td单元格*/
</style>
<title>表格&css样式</title>
</head>
<body>
<table>
<caption>出 库 单</caption>
<thead>
<tr >
<th colspan="5">购货单位：PHP中文网</th>
<th colspan="3">开单日期：2019年09月08日</th>
</tr>
<tr>
<th>序号</th>
<th>物品名称</th>
<th>规格</th>
<th>单位</th>
<th>数量</th>
<th>单价</th>
<th>金额</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td >1</td>
<td>信阳毛尖</td>
<td>500g</td>
<td>盒</td>
<td>2</td>
<td>300</td>
<td>600</td>
<td>送精美包装</td>
</tr>
<tr>
<td >2</td>
<td>黄山毛峰</td>
<td>500g</td>
<td>盒</td>
<td>2</td>
<td>340</td>
<td>680</td>
<td>送精美包装</td>
</tr>
<tr>
<td >3</td>
<td>铁观音</td>
<td>500g</td>
<td>盒</td>
<td>2</td>
<td>400</td>
<td>800</td>
<td>送精美包装</td>
</tr>
<tr>
<td>4</td>
<td>安吉白茶</td>
<td>500g</td>
<td>盒</td>
<td>3</td>
<td>400</td>
<td>1200</td>
<td>送精美包装</td>
</tr>
<tr>
<td>5</td>
<td>碧螺春</td>
<td>250g</td>
<td>盒</td>
<td>1</td>
<td>600</td>
<td>600</td>
<td>送精美包装</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="6">总金额：叁仟捌佰捌拾元整</td>
<td colspan="2">￥：3880.00</td>
</tr>
<tr>
<td colspan="2">出货人：</td>
<td colspan="2">Mr.诚</td>
<td colspan="2">出货仓库：</td>
<td colspan="2">杭州仓</td>
</tr>
<tr>
<td colspan="2">出货说明：</td>
<td colspan="6">此单包邮</td>
</tr>
</tfoot>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：
给表格设置圆角必须有以下几步：
表格合并模型设置为默认：border-collapse: separate;
设置相邻单元格的间距：border-spacing: 0;
设置表格圆角：border-radius: 12px;
分别设置左上border-top-left-radius、右上border-top-right-radius、左下border-bottom-left-radius、右下border-bottom-right-radius单元格的圆角。
