在進行 Web 開發的過程中,我們常常需要使用到表格來展示大量的數據信息。使用 CSS 來美化這些表格是非常有必要的,其中一個重點就是如何設置表格頂部的樣式。
我們可以使用
示例代碼如下:
以上示例代碼中,我們設置了表格的整體樣式為合并邊框、寬度為 100%;設置了表頭和表體單元格的內邊距、水平對齊方式、下邊框;并通過設置
通過這些設置,我們可以使表格更加美觀,同時也使數據更易于觀察和理解。
我們可以使用
border
來設置表格頂部的橫線,也可以使用background-color
來給表頭行填充背景顏色,使其與其他行區別開來。示例代碼如下:
table { border-collapse: collapse; width: 100%; } th, td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd; } th { background-color: #f2f2f2; border-top: 2px solid #ddd; border-bottom: 2px solid #ddd; }
以上示例代碼中,我們設置了表格的整體樣式為合并邊框、寬度為 100%;設置了表頭和表體單元格的內邊距、水平對齊方式、下邊框;并通過設置
background-color
為表頭行填充背景顏色,border-top
設置表頭行的上橫線,border-bottom
設置表頭行的下橫線。通過這些設置,我們可以使表格更加美觀,同時也使數據更易于觀察和理解。