在開發中,我們常常會用到CSS表格來展現數據。然而,有時可能會遇到TH(表頭單元格)寬度不一致的問題。那么,該如何讓TH等寬呢?
table {
width: 100%;
border-collapse: collapse;
}
td,
th {
border: 1px solid #ccc;
padding: 10px;
}
thead th {
width: calc(100% / 3);
}
如上代碼所示,我們可以使用CSS中的calc函數來計算TH的寬度。在這里,我們將寬度設置為表格寬度的三分之一,這樣TH就可以保持等寬了。
需要注意的是,我們要將表格的邊框合并,以保證表格的整體美觀度。使用border-collapse: collapse;屬性可以實現該效果。
此外,我們也可以使用JavaScript來動態計算寬度。具體方法就是通過JS獲取TH的個數,然后將表格的總寬度平均分配給每個TH。不過,這種方法需要處理一些兼容性問題,而且大多數情況下,使用CSS的calc函數已經足夠滿足我們的需求了。
上一篇css表格如何均勻分布
下一篇css改變鼠標為圖片