thead與td無法對齊該怎麼辦？

當使用工具列中的顯示/隱藏列的時候， 經常出現表格的列頭與內容無法對齊的問題。

網路上搜到兩種處理方法，如下：

1. 去掉option中的height，完美對齊，但當資料較多的時候，table會自動增加height，顯示所有資料而不顯示捲軸。

2. 註解掉落如下兩行

//this.resetHeader();
//padding += this.$header.outerHeight();

   完美對齊，但會導致無法凍結表頭。

 

這兩種結果都是魚與熊掌不可兼得， 受影響的功能也是非常想要的。

懷疑問題的原因應該是列的減少過程中，剩餘列設定了寬度，但減少列後要填入剩餘寬度時的計算問題。

 

 最後自己採用瞭如下方式，供大家參考：  

不設定其中一列的寬度，使其自動填充，如下程式碼

        <thead><tr><th data-field="Code" data-width="105px">编号</th><th data-field="Name" data-switchable="false">姓名</th><th data-field="Sex" data-width="120px">性别</th><th data-field="Age" data-width="120px">年龄</th><th data-field="School" data-width="30px">学校</th></tr></thead>

 這樣只要不去掉名稱，去掉其他列的時候不會出現對不齊的問題，為了防止此列被去掉，加上 data-switchable="false"

 正常業務中也常會有這樣要求自動填入寬度的列，算是比較好的一種解決方式。

以上是thead與td無法對齊該怎麼辦？的詳細內容。更多資訊請關注PHP中文網其他相關文章！