CSS表格雙框設置,讓您的表格更加醒目和有條理,在CSS中,您可以通過添加邊框和背景顏色來創(chuàng)建雙框表格,以下是一些示例代碼,您可以參考:
HTML代碼:
<table> <thead> <tr> <th>標題1</th> <th>標題2</th> <th>標題3</th> </tr> </thead> <tbody> <tr> <td>數(shù)據(jù)1</td> <td>數(shù)據(jù)2</td> <td>數(shù)據(jù)3</td> </tr> <tr> <td>數(shù)據(jù)4</td> <td>數(shù)據(jù)5</td> <td>數(shù)據(jù)6</td> </tr> </tbody> <tfoot> <tr> <td>底部標題1</td> <td>底部標題2</td> <td>底部標題3</td> </tr> </tfoot> </table>
CSS代碼:
table { border: 2px solid #000; /* 設置表格邊框顏色和寬度 */ background-color: #fff; /* 設置表格背景顏色 */ } thead { border-top: 1px solid #000; /* 設置表頭邊框顏色 */ border-left: 1px solid #000; /* 設置表頭邊框顏色 */ border-right: 1px solid #000; /* 設置表頭邊框顏色 */ } tbody { border-left: 1px solid #000; /* 設置表格體邊框顏色 */ border-right: 1px solid #000; /* 設置表格體邊框顏色 */ } tfoot { border-bottom: 1px solid #000; /* 設置表尾邊框顏色 */ border-left: 1px solid #000; /* 設置表尾邊框顏色 */ border-right: 1px solid #000; /* 設置表尾邊框顏色 */ }
在這個示例中,我們使用了border
屬性來設置表格的邊框顏色和寬度,以及background-color
屬性來設置表格的背景顏色,我們還分別設置了表頭、表格體和表尾的邊框顏色,您可以根據(jù)自己的需求來調整這些樣式。
版權聲明:除非特別標注,否則均為本站原創(chuàng)文章,轉載時請以鏈接形式注明文章出處。