在前端開發中,css的表格樣式是非常常用的一種技術。在表格中,通常需要設定每個單元格的寬度。而在很多情況下,我們希望表格中的某一列(或多列)具有固定的寬度,其他列的寬度則隨頁面寬度自適應。這時,我們就可以使用css的td寬度固定技術。
固定列寬可以使用css的width屬性來實現。舉例來說,如果我們想讓第一列的寬度為100px,代碼如下:
table td:first-child { width:100px; }
這樣就可以實現第一列寬度固定。同樣,如果我們想讓第一列和第二列的寬度固定,并讓其他列寬度自適應,代碼如下:
table td:nth-child(1), table td:nth-child(2) { width:100px; } table td:not(:nth-child(1)):not(:nth-child(2)) { width:auto; }
上面的代碼中,我們使用了:nth-child選擇器來選擇第一列和第二列。然后,使用:not選擇器來選擇除第一列和第二列以外的所有單元格,將它們的寬度設為auto,表示自適應。
需要注意的是,如果表格中的所有單元格的寬度之和小于表格的寬度,可能會存在剩余空間。此時,這些空間將分配給最后一列的寬度。如果你想要某些列的寬度一定,而其他列的寬度自適應,可以參考上面的代碼塊進行調整。
上一篇css text字體顏色
下一篇css td文字換行顯示