CSS中可以通過設(shè)置td的寬度屬性來固定單元格的長度。有兩種方式可以實現(xiàn):
table { width: 100%; } td { width: 100px; }
第一種方式是設(shè)置table的寬度為100%,然后再設(shè)置td的寬度為具體的像素值,如上例中的100px。這樣可以保證單元格的長度在不同的屏幕和設(shè)備上保持一致,但是如果單元格的內(nèi)容長度超出了設(shè)置的寬度,會自動換行。
td { width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
第二種方式是在設(shè)置td的寬度的同時,還要設(shè)置單元格內(nèi)文字的樣式,如上例中將white-space屬性設(shè)置為nowrap可以禁止單元格內(nèi)文字自動換行。通過設(shè)置overflow為hidden可以將超出寬度的文字隱藏起來,而text-overflow: ellipsis則可以在文字溢出時顯示省略號。
需要注意的是,當(dāng)表格中有多個td需要設(shè)置寬度時,寬度總和不要超過table的寬度。否則,會造成表格過寬而影響頁面的美觀。