柚子快報邀請碼778899分享：前端 css3表格練習
1.效果圖
2.html
獲獎名單
| 中獎用戶 | PR排名 | 具體獎品 |
| 王振民 | 1 | 一年學費+ 特別禮品 |
| 王振民 | 1 | 一年學費+ 特別禮品 |
| 王振民 | 1 | 一年學費+ 特別禮品 |
| 王振民 | 1 | 一年學費+ 特別禮品 |
| 王振民 | 1 | 一年學費+ 特別禮品 |
| 王振民 | 1 | 一年學費+ 特別禮品 |
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;
/* 關鍵點,利用定位讓文字居中 */
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;
/* 上邊框和左邊框為0 */
border-top: 0;
border-left: 0;
}
table td:nth-child(3){
border-right: 0;
}
/* 站在父元素的角度上選擇最后一個子元素 */
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;
}
柚子快報邀請碼778899分享：前端 css3表格練習
好文推薦
本文內容根據(jù)網(wǎng)絡資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點和立場。
轉載請注明，如有侵權，聯(lián)系刪除。
Etsy手工藝品坊
