在 HTML 中,我們使用表格來展示數據,而 CSS 可以幫助我們美化這些表格。在 CSS 中,我們可以通過設置表格長度來控制表格的寬度。
table { width: 100%; /* 將表格寬度設置為父元素的寬度,這里設置為100% */ max-width: 600px; /* 設置表格最大寬度為600像素 */ border-collapse: collapse; /* 將單元格邊框合并 */ } td, th { border: 1px solid #ddd; /* 設置單元格邊框,這里設置為灰色 */ padding: 10px; /* 設置單元格內邊距 */ }
在上面的代碼中,我們使用了table
選擇器來設置整個表格的寬度,將其設置為父元素的寬度,并且設置了最大寬度為600像素。使用border-collapse
屬性將單元格邊框合并,這樣可以使表格看起來更加整潔。
接著,我們使用了td, th
選擇器來設置單元格,包括單元格邊框和內邊距。我們將單元格邊框設置為1像素的灰色邊框,將內邊距設置為10像素,這樣可以使表格看起來更加美觀。
最后,我們要注意的是,當表格包含較多列時,我們需要合理地設置單元格寬度,否則可能會導致表格變形或者出現水平滾動條。如果需要更加詳細的表格設置,可以查看 CSS 的表格屬性。