今天遇到一个table表格带圆角的一个弹框，避免自己以后忘记，记录一下。
效果图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table表格实现圆角</title>
<style>
table{
width: 500px;
border-spacing: 0;
border: 1px #000;
text-align: center;
}
table thead tr,table tbody tr {
height: 50px;
line-height: 50px;
}
table tr th {
background: #2CBAF9;
}
table tbody tr td{
border-left: 1px solid #2CBAF9;
}
table tr:first-child th:first-child {
border-top-left-radius: 12px;
}
table tr:first-child th:last-child {
border-top-right-radius: 12px;
}
table tr td:last-child{
border-right: 1px solid #2CBAF9;
}
table tr td{
border-bottom: 1px solid #2CBAF9;
}
table tr:last-child td:first-child {
border-bottom-left-radius: 12px;
}
table tr:last-child td:last-child {
border-bottom-right-radius: 12px;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>礼品名称</th>
<th>节前发货日期</th>
<th>节后发货日期</th>
</tr>
</thead>
<tbody>
<tr>
<td>鲜花</td>
<td>1月22日</td>
<td>2月27日</td>
</tr>
<tr>
<td>羽毛枕</td>
<td>1月22日</td>
<td>2月19日</td>
</tr>
<tr>
<td>美的养生壶</td>
<td>1月25日</td>
<td>2月19日</td>
</tr>
<tr>
<td>电动牙刷</td>
<td>1月31日</td>
<td>2月19日</td>
</tr>
</tbody>
</table>
</body>
</html>
1261
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
