在網頁開發中,表格是非常常見的元素,而CSS可以為表格提供豐富的樣式和布局。下面介紹一些適用于表格的CSS樣式。
/* 給表格設置邊框 */ table { border-collapse: collapse; /* 合并邊框 */ border: 1px solid #ddd; /* 設置邊框樣式 */ } /* 設置表頭單元格樣式 */ th { background-color: #f5f5f5; /* 設置背景顏色 */ border: 1px solid #ddd; /* 設置邊框樣式 */ text-align: left; /* 設置文本對齊方式 */ padding: 5px 10px; /* 設置內邊距 */ } /* 設置數據單元格樣式 */ td { border: 1px solid #ddd; /* 設置邊框樣式 */ text-align: left; /* 設置文本對齊方式 */ padding: 5px 10px; /* 設置內邊距 */ } /* 給偶數行設置背景顏色 */ tr:nth-child(even) { background-color: #f9f9f9; } /* 給表格設置寬度 */ table { width: 100%; } /* 設置表頭固定 */ thead { position: sticky; top: 0; z-index: 1; } /* 設置表格超出部分隱藏 */ table { overflow-x: scroll; } /* 設置表格奇偶行鼠標懸停樣式 */ tr:hover { background-color: #e8f2ff; }
上面的代碼展示了如何給表格添加邊框、設置單元格樣式、給偶數行設置背景顏色、設置表頭固定、設置表格寬度、超出部分隱藏和設置鼠標懸停樣式等常用樣式。
使用合適的CSS樣式可以讓表格更美觀、易讀,并提高用戶體驗。