欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

好看表格 css

錢瀠龍2年前8瀏覽0評論

好看的表格是網頁設計中必不可少的一部分,表格的樣式往往是通過 CSS 實現的。下面給大家介紹一些實現好看表格的 CSS 技巧。

/* 設置表格的外邊距和內邊距 */
table {
margin: 20px;
padding: 0;
border-collapse: collapse;
}
/* 設置表格的邊框 */
td, th {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
/* 設置表頭的背景色和文字顏色 */
th {
background-color: #333;
color: #fff;
}
/* 設置隔行變色 */
tr:nth-child(even) {
background-color: #f2f2f2;
}
/* 設置鼠標懸停時的背景色 */
tr:hover {
background-color: #ddd;
}
/* 設置表格列寬 */
td:nth-child(1),
th:nth-child(1) {
width: 20%;
}
td:nth-child(2),
th:nth-child(2) {
width: 30%;
}
td:nth-child(3),
th:nth-child(3) {
width: 50%;
}

通過以上 CSS 樣式,我們可以實現表格的外邊距和內邊距的設置,以及表格的邊框,表頭的背景色和文字顏色,表格隔行變色,鼠標懸停時的背景色等效果。

同時,通過設置表格列寬,我們可以使表格看起來更加美觀和整齊。

總之,精美的表格設計可以為網頁增添很多亮點,通過上述 CSS 技巧,相信大家可以輕松實現自己想要的表格樣式。