柚子快報(bào)邀請(qǐng)碼778899分享：前端 css3表格練習(xí)
1.效果圖
2.html
獲獎(jiǎng)名單
| 中獎(jiǎng)用戶(hù) | PR排名 | 具體獎(jiǎng)品 |
| 王振民 | 1 | 一年學(xué)費(fèi)+ 特別禮品 |
| 王振民 | 1 | 一年學(xué)費(fèi)+ 特別禮品 |
| 王振民 | 1 | 一年學(xué)費(fèi)+ 特別禮品 |
| 王振民 | 1 | 一年學(xué)費(fèi)+ 特別禮品 |
| 王振民 | 1 | 一年學(xué)費(fèi)+ 特別禮品 |
| 王振民 | 1 | 一年學(xué)費(fèi)+ 特別禮品 |
3.css
*{
padding: 0;
margin: 0;
list-style-type: none;
}
.line{
width: 330px;
height: 1px;
border-top: 1px solid #7ef805;
margin: 0 auto;
margin-top: 50px;
}
h3{
width: 100px;
text-align: center;
/* 關(guān)鍵點(diǎn),利用定位讓文字居中 */
position: relative;
margin: 0 auto;
bottom: 14px;
background-color: white;
color: #7ef805;
}
table{
width: 330px;
/* margin: 0 auto;居中 */
margin: 0 auto;
text-align: center;
vertical-align: middle;
}
table tr td{
/* width: 10%; */
height: 50px;
}
/* 去除表格四周邊框 */
table td{
border: 1px solid blue;
/* 上邊框和左邊框?yàn)? */
border-top: 0;
border-left: 0;
}
table td:nth-child(3){
border-right: 0;
}
/* 站在父元素的角度上選擇最后一個(gè)子元素 */
table tbody tr:last-child td{
border-bottom: 0;
}
thead{
background-color: #7ef805;
color: white;
}
.warp{
/* font-size: 10px; */
font-weight: bolder;
}
/* 隔行變色 */
tbody tr:nth-child(odd){
background-color: #7ef805;
}
tbody tr:nth-child(even){
background-color: red;
}
tbody tr{
border: 1px solid red;
}
柚子快報(bào)邀請(qǐng)碼778899分享：前端 css3表格練習(xí)
好文推薦
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點(diǎn)和立場(chǎng)。
轉(zhuǎn)載請(qǐng)注明，如有侵權(quán)，聯(lián)系刪除。
Etsy手工藝品坊
