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)