色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

好看的 css表格樣式

錢諍諍2年前7瀏覽0評論

在網頁設計中,表格是一種非常常見的元素。但是,大多數默認的表格樣式并沒有那么好看,也沒有那么具有吸引力。因此,設計師們會使用 CSS 來修改表格的樣式,使其更為美觀。

/* 一個簡單的表格樣式 */
table {
border-collapse: collapse;
width: 100%;
max-width: 800px;
margin: 0 auto;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
table th, table td {
padding: 10px;
text-align: center;
}
table th {
background-color: #eee;
}
table tr:nth-child(even) {
background-color: #f2f2f2;
}
table tr:hover {
background-color: #ddd;
}

這是一個簡單的表格樣式代碼,我們來一步一步看:

首先,我們設置表格的border-collapsecollapse,即消除表格的邊框和間隔。同時通過width屬性設置表格的寬度為 100%,也就是表格自適應父元素的寬度。接著,我們通過max-width屬性控制表格的最大寬度為 800px,這樣在大屏幕設備上表格就不會過于寬大,顯示效果也會更加美觀。

接下來,我們通過margin屬性將表格居中顯示。同時為表格設置一定的陰影(box-shadow),使表格更有層次感。

然后是設置表格的每一個單元格的樣式。通過設置text-align: center;讓單元格內容居中顯示。同時設置padding: 10px;為單元格增加一定的內邊距,使表格更具層次性和美觀性。

為了讓表格更具辨識度,我們對表頭(thead)用background-color: #eee;進行了背景顏色的設置,并將每一行的背景顏色進行了交替(奇偶行),即background-color: #f2f2f2;。這樣表格的每一行都很清晰,讓用戶更容易了解其中的內容。

最后,我們用table tr:hover對鼠標懸停狀態進行樣式設置,通過修改行的背景顏色為#ddd;,列表格的內容更加醒目。

這是一個相對簡單的表格樣式,但往往也是最為實用的。通過修改這個樣式代碼配合具體需求,你可以設計出更多更好看的、更富層次感的表格樣式。