在網頁制作中,表格是非常常見的一種布局形式,而如何讓表格平均分配是我們經常面對的問題,這里介紹一下用CSS如何實現。
table { border-collapse: collapse; width: 100%; } td { width: 25%; box-sizing: border-box; padding: 10px; border: 1px solid #ccc; }
首先我們設置表格的整體樣式,為了保證表格邊框的一致性,我們將邊框合并并設置寬度為100%。接著,我們分配每個單元格的寬度為25%,這樣4個單元格就可以平均分配整個表格的寬度。此時,我們需要設置box-sizing為border-box,這樣padding值不會撐開單元格大小。最后,我們設置單元格邊框和間距的樣式。
如果表格單元格不是固定的數量,我們可以通過CSS的calc函數來計算每個單元格的寬度,例如:
td { width: calc((100% - 60px)/3); box-sizing: border-box; padding: 10px; border: 1px solid #ccc; }
這里假設表格有3個單元格,每個單元格的padding為10px,邊框為1px,總共60px,屏幕寬度為100%。用100%減去60px,再除以3個單元格,就可以計算出每個單元格的寬度了。
通過以上的方法,我們可以輕松地達到表格平均分配的效果。
上一篇css怎么居中菜單
下一篇CSS設置多個空格空格