ASP網站開發中,CSS表格樣式是非常重要的一部分,能夠讓網站變得更加美觀和易于閱讀。下面我們就來介紹一些常見的CSS表格樣式。
table{ border-collapse:collapse; /* 合并邊框 */ width:100%; /* 表格寬度 */ margin-bottom:20px; /* 表格下邊距 */ font-size:16px; /* 字體大小 */ text-align:center; /* 文字對齊方式 */ } td,th{ border:1px solid #ccc; /* 單元格邊框 */ padding:10px; /* 單元格內邊距 */ } th{ background-color:#f1f1f1; /* 表頭背景顏色 */ font-weight:bold; /* 表頭加粗 */ } tr:nth-child(even){ background-color:#f9f9f9; /* 偶數行背景顏色 */ }
以上是一個基本的表格樣式,下面我們來介紹一些自定義的表格效果。
1. 鼠標懸停變色
tr:hover{ background-color:#f5f5f5; /* 鼠標懸停行背景顏色 */ }
2. 斑馬紋表格
tr:nth-child(odd){ background-color:#f5f5f5; /* 奇數行背景顏色 */ } tr:nth-child(even){ background-color:#fff; /* 偶數行背景顏色 */ }
3. 總計行加粗
tr:last-child{ font-weight:bold; /* 最后一行字體加粗 */ }
4. 表格寬度適應內容
table{ width:auto; /* 表格自適應寬度 */ }
總結起來,通過CSS表格樣式,我們能夠實現很多個性化的效果,讓網站更加美觀、易于讀取。在實際開發中,我們可以針對不同的需求進行樣式的調整,達到最佳的顯示效果。
上一篇30種css選擇器
下一篇ar開頭的css標簽