CSS表格排版樣式在網頁設計中是很重要的一部分,可以讓網站的內容更加有序、美觀。本文將介紹幾種常見的CSS表格排版樣式。
table { border-collapse: collapse; /* 合并表格邊框 */ width: 100%; /* 表格寬度為100% */ } th, td { padding: 8px; /* 單元格內邊距為8px */ text-align: left; /* 單元格內容左對齊 */ border-bottom: 1px solid #ddd; /* 單元格底邊框為1px實線 */ } th { background-color: #f2f2f2; /* 表頭背景色為灰色 */ } tr:hover { background-color: #f5f5f5; /* 鼠標懸停時行背景色為淺灰色 */ }
上述代碼中,table
樣式定義了表格的基本屬性,如邊框合并、寬度等,th
和td
樣式定義了單元格的內邊距、文本對齊和底邊框樣式,th
樣式還定義了表頭的背景色。最后tr:hover
樣式實現了鼠標懸停時行的背景色變化。
除了上述基本樣式外,還有許多其他的CSS表格排版樣式,如固定表頭表格、帶斑馬線的表格、帶滾動條的表格等,讀者可以自行學習探究。
上一篇css表格自動合并插件
下一篇css表格每行的寬度