CSS在Web開發中無疑是必不可少的一部分,而table元素作為表格展示的核心,也是不可或缺的。在表格中使用橫線樣式可以更好地區分不同的數據行,同時增加頁面的美觀性。
table { border-collapse: collapse; } th, td { border: 1px solid #000; padding: 8px; } tr:nth-child(even) { background-color: #f2f2f2; } tr th:first-child, tr td:first-child { border-left: none; } tr th:last-child, tr td:last-child { border-right: none; } tr:first-child th, tr:first-child td { border-top: none; } tr:last-child th, tr:last-child td { border-bottom: none; } tr:hover { background-color: #ddd; } tr:hover td { color: #000; }
上述的CSS代碼實現了一個基本的table元素橫線樣式展示。其中border-collapse屬性用于合并相鄰單元格的邊框,使整個表格具有一致的邊框風格。th和td元素使用border屬性定義了它們的邊框樣式和寬度,同時使用padding屬性設置了單元格內的空白間距。
tr:nth-child(even)選擇器用于基數行和偶數行的顏色區分,而:first-child和:last-child選擇器則用于去除單元格中不必要的邊框。:hover偽類則可以定義表格行的鼠標懸停效果。
通過以上的CSS代碼,可以實現一個簡單而美觀的表格展示。在實際開發中,可以根據項目需求調整樣式屬性值,或者使用預定義樣式框架進行快速開發。