CSS樣式表可以用來設置HTML中的各種元素的樣式,包括表格。如果想要設置表格的列等寬,CSS中可以使用table-layout屬性來實現。
下面是一個使用了CSS樣式表的表格代碼:
<style> table { width: 100%; table-layout: fixed; } th, td { width: 25%; border: 1px solid black; } </style> <table> <tr> <th>heading 1</th> <th>heading 2</th> <th>heading 3</th> <th>heading 4</th> </tr> <tr> <td>cell 1</td> <td>cell 2</td> <td>cell 3</td> <td>cell 4</td> </tr> <tr> <td>cell 5</td> <td>cell 6</td> <td>cell 7</td> <td>cell 8</td> </tr> </table>
通過上述代碼,設置了table-layout的值為fixed,這樣表格的寬度就由列的寬度來決定。而每一列的寬度設置為25%,就可以實現等寬效果。同時加上邊框樣式的設置,表格更加美觀。
在上述CSS樣式表中,如果具體設置每一列的寬度,可以修改td和th選擇器樣式中的width值,比如設置20%或30%等,以得到更適合自己的表格樣式。
上一篇css如何讓文字傾斜
下一篇css如何讓圖片浮動