CSS中可以使用table-layout屬性控制表格的布局方式。其中,table-layout的值為auto時,會根據(jù)單元格和內(nèi)容自動計算表格寬度,但每個單元格的寬度并不會被平均分配。
如果需要讓每個單元格寬度平均分配,可以使用CSS的width屬性來設置單元格寬度。但這種方式并不是特別靈活,如果表格列數(shù)改變,需要重新調(diào)整各個單元格的寬度,比較麻煩。
更好的方式是使用CSS的display屬性中的table-cell值來控制單元格寬度,實現(xiàn)自動平均分配。具體操作如下:
table { display: table; width: 100%; } td { display: table-cell; width: auto; text-align: center; }
通過將table的display屬性值設置為table,將td的display屬性值設置為table-cell,以及將table的寬度設置為100%,就可以實現(xiàn)單元格寬度自動平均分配,而不用顯式地設置單元格寬度。
同時需要注意,要將單元格text-align屬性設置為center,使得表格內(nèi)的內(nèi)容居中顯示。
上一篇css td不換行
下一篇css td 強制換行