色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css中表格的樣式有哪些

傅智翔2年前9瀏覽0評論

在網頁設計中,表格是常用的元素之一。但是標準的HTML表格在樣式方面比較受限,因此,CSS樣式就顯得更加重要了。下面我們來了解一些CSS中表格的樣式。

table{
border-collapse: collapse;  //設置邊框合并
width: 100%;  //設置表格寬度
text-align: center;  //設置文本居中
}
th, td{
padding: 10px;  //設置單元格內邊距
border: 1px solid #ddd;  //設置單元格邊框
}
th{
background-color: #f5f5f5;  //設置表頭背景色
font-weight: bold;  //設置表頭字體加粗
}
tr:nth-child(even){
background-color: #f2f2f2;  //設置偶數行背景色
}

以上代碼展示了一個基本的表格樣式。首先,我們設置了表格的邊框合并以及寬度、文本居中等樣式。然后,對于表格中的每個單元格,我們設置了邊距和邊框樣式。對于表頭,我們設置了背景色和字體加粗。最后,我們通過:nth-child(even)選擇器設置了偶數行的背景色。

除此之外,我們還可以根據需要設置其他的樣式,例如鼠標懸停、選中狀態等。

td:hover{
background-color: #ddd;  //鼠標懸停時背景色變化
}
td:active{
background-color: #ccc;  //單元格選中時背景色變化
}

以上代碼展示了鼠標懸停和選中狀態時表格樣式的變化。通過:hover和:active偽類選擇器,我們可以輕松地實現這些效果。

總的來說,CSS樣式能夠讓表格在視覺上更加美觀、有條理,為網頁的可讀性和可用性提供了很大的幫助。