CSS不規則表格樣式可以讓你的網頁更加美觀,下面我們來看一些不規則表格樣式。
/* 沒有邊框的表格 */ table { border-collapse: collapse; } td { padding: 0; } td:not(:last-child) { border-bottom: solid 1px #ccc; }
上述代碼可以使表格的線條更加細膩。
/* 背景有色的表格 */ table tr:nth-child(odd) { background-color: #f5f5f5; }
使用上述代碼,可以讓奇數行的背景有不同的顏色,使表格更加清晰明了。
/* 懸浮效果的表格 */ table tr:hover { background-color: #f2f2f2; }
上述代碼可以在鼠標懸浮在表格上時給表格添加一個特殊的背景效果,增加網頁的交互性。
/* 帶有圓角的表格 */ table { border-collapse: collapse; border-radius: 10px; overflow: hidden; } th, td { padding: 10px; border: 1px solid #ccc; border-radius: 10px; }
使用上述代碼可以使表格帶有圓角,更加美觀。
/* 帶陰影的表格 */ table { border-collapse: collapse; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); }
上述代碼可以使表格帶有陰影,增加表格的立體感。
上述幾種不規則表格樣式可以為你的網頁增色不少,歡迎嘗試使用!
上一篇method異步vue
下一篇隱藏溢出部分css