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還支持多列排序、列寬拖拽、單元格合并等功能,為網頁表格帶來更加豐富的體驗。