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

css3中的表格樣式

錢衛國2年前11瀏覽0評論

CSS3中的表格樣式為我們提供了更多的選擇,使得我們能夠更加靈活地為網頁設計表格樣式。下面我們來了解一下CSS3中表格樣式的用法。

//Table元素樣式
table {
border-collapse: collapse;  //合并邊框
table-layout: fixed;  //自適應表格寬度
width: 100%;  //表格寬度占據父元素全部
}
//表格線樣式
table, th, td {
border: 1px solid #ccc;  //設置表格邊框
}
//Caption元素樣式
caption {
font-size: 1.2rem;  //設置標題字體大小
font-weight: bold;  //設置標題加粗
padding: 1rem 0;  //設置標題內邊距
text-align: center;  //設置標題居中
}
//Header元素樣式
thead {
background-color: #f7f7f7;  //設置表頭背景色
font-weight: bold;  //設置表頭加粗
}
//單元格樣式
th, td {
padding: 0.75rem;  //設置單元格內邊距
text-align: center;  //設置單元格居中
}
//鼠標懸停效果
tr:hover {
background-color: #f5f5f5;  //設置行背景色
}
//斑馬線效果
tr:nth-child(odd) {
background-color: #ffffff;  //設置偶數行背景色
}
tr:nth-child(even) {
background-color: #f5f5f5;  //設置奇數行背景色
}

通過以上樣式設置,我們可以輕松地為表格添加標題、表頭、單元格樣式、鼠標懸停效果以及斑馬線效果等。此外,CSS3還支持多列排序、列寬拖拽、單元格合并等功能,為網頁表格帶來更加豐富的體驗。