Bootstrap table使用心得---thead與td無法對齊的問題

FlyLolo發表於2017-07-01
boot

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

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

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="LoloOperate" data-width="30px">操作</th>
            </tr>
        </thead>

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

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

相關文章