table的制作,设置圆角的话查了下貌似说用css3比较容易做出来,看了网上代码还是不太理解,属性太多。得慢慢消化实战才能记得住
实例
html>
表格
型号硬盘内存cpu尺寸颜色
mac book pro128g4gi313.3银2568gi513.3灰mac book air2568gi513.3灰2568gi513.3灰备注:颜色以当天发货为准
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
table{
border: 1px solid #444444;
width: 600px;
margin: 40px auto;
box-shadow: 2px 2px 2px #888888;
position: relative;
}
table caption{
font-weight: bold;
font-size: 1.3rem;
margin-bottom: 5px;
}
th, td {
border: 1px solid #444444;
text-align: center;
padding: 10px;
}
table thead tr th{
background-color: #cccccc;
}
table tbody > tr:first-of-type > td:first-of-type {
background-color: lightcoral;
}
table tbody > tr:nth-last-of-type(2) > td:first-of-type {
background-color: lightcyan;
}
thead>tr:nth-of-type(1)>th:nth-of-type(1) {
border-top-left-radius: 15px;
}
thead>tr:nth-of-type(1)>th:last-of-type {
border-top-right-radius: 15px;
}
tfoot>tr:nth-of-type(1)>td:nth-of-type(1) {
border-bottom-left-radius: 15px;
}
tfoot>tr:nth-of-type(1)>td:last-of-type {
border-bottom-right-radius: 15px;
}
运行实例 »
点击 "运行实例" 按钮查看在线实例
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLicmbw5CZzMmZhFzYzETY2YmMwgDMhRmNlF2N4UmNxQDN2cjMx8CX0JXZ252bj91Ztl2Lc52YucWbp5GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.png)