在使用CSS繪制表格時,很多人會遇到一個問題,那就是表格沒有占滿整個寬度。這種情況可能會讓人感到很困擾,但是實際上,只需要進行一些簡單的調整即可。
table { width: 100%; border-collapse: collapse; } td, th { padding: 10px; text-align: left; border: 1px solid black; }
以上是一個基本的CSS表格樣式,其中設置了表格寬度為100%,邊框合并,單元格內填充為10px,水平居左對齊,邊框為1px的黑色實線。
但實際上,在某些情況下,表格可能會因為單元格內的內容過少而未能占滿整個寬度。這時,我們可以通過將表格布局設置為自適應來解決這個問題。
table { display: table; table-layout: fixed; } td, th { word-wrap: break-word; }
以上是調整后的CSS表格樣式,其中設置了表格布局為自適應,單元格內文字超出單元格時自動換行。這樣,即使單元格內容較少,表格也能夠占滿整個寬度。
總之,通過一些簡單的CSS調整,我們可以輕松解決表格未占滿的問題。
上一篇css表格行邊框線
下一篇css顏色表制作好看