CSS表格是布局網頁中最常見的元素之一,它通常用來呈現數據、顯示內容,并幫助我們展示信息。一般的樣式可以讓表格看起來很整潔,但如果你想要讓你的表格與眾不同,你需要一些個性化的CSS樣式。
/*添加表格線*/ table { border-collapse: collapse; border-spacing: 0; } td, th { border: 1px solid #ddd; padding: 10px; } /*斑馬線*/ tr:nth-child(even) { background-color: #f2f2f2; } /*文本居中*/ td, th { text-align: center; } /*鼠標懸停效果*/ tr:hover { background-color: #ddd; }
使用這些樣式可以讓您的表格更加吸引人,并使您的內容更容易閱讀和理解。通過增加這些樣式,您可以讓您的表格更加個性化,讓人們更容易注意到它。因此,如果您想要在您的網頁上添加表格,確保使用表格的最佳實踐和您的網站的主題:
/*隱藏表格邊框*/ table { border-collapse: collapse; border: none; } /*疊加固定表頭*/ thead { position: sticky; top: 0; background-color: #fff; } /*表頭特殊樣式*/ thead th { font-weight: bold; background-color: #eee; } /*讓表格單元格在移動端垂直布局*/ @media (max-width: 767px) { td, th { display: block; } td { border: none; position: relative; padding-left: 50%; } td:before { position: absolute; left: 6px; content: attr(data-label); text-transform: uppercase; font-weight: bold; } }
在開發網頁時,要為表格添加適當的樣式,以使它更適應您的頁面主題。以上是一些常用的CSS樣式,可以幫助您呈現具有個性的表格。通過使用這些技巧,您可以使您的表格在網站中具有更高的可讀性和吸引力,從而幫助您吸引更多的訪問者。