CSS可以非常方便地控制表格的樣式,包括內容位置、邊框樣式、背景顏色等。其中,表格的第一列居中是一個比較常見的需求,這里我們來討論一下該如何實現。
table { border-collapse: collapse; } td { text-align: center; } td:first-child { text-align: center; }
上述代碼中,我們使用的是text-align屬性來控制單元格內容的位置。通過將表格的邊框折疊(即border-collapse: collapse;),可以避免不同單元格之間產生多余的邊框。然后,我們使用td選擇器來讓表格所有單元格的內容都居中。這里需要注意,如果只是想要讓第一列的內容居中,則需要再添加一個選擇器td:first-child,這樣就可以只改變第一列的樣式。
當然,我們也可以使用偽類選擇器:first-child來達到同樣的效果:
table { border-collapse: collapse; } td { text-align: center; } td:first-child, th:first-child { text-align: center; }
如上所示,我們出現了一個新的選擇器th:first-child,這是為了讓表頭也可以居中。如果只是需要讓表格內容居中,那么只需要保留td:first-child即可。
上一篇java閉包和回調
下一篇css插件布局聊天框