用瀏覽器審視下代碼發(fā)現(xiàn)<thead>和<tbody>并不在一個(gè)<table>下

image.png

再看下源碼下的目錄

table-body

table-header

是的，thead和tbody是分開寫的，那為什么這樣要分開寫呢？分開寫后每一列是怎么對(duì)齊的？
先看下列是怎么對(duì)齊的。

image.png

看代碼發(fā)現(xiàn)使用colgroup屬性控制他們有相同寬度的列。name可以不寫，按順序?qū)?yīng)th，td。并且table的樣式改為table-layout: fixed;border-collapse: separate。
開發(fā)中會(huì)發(fā)現(xiàn)td，th的屬性并不好控制，我們?cè)诶锩娑嗵滓粚觗iv控制樣式。

image.png

分開寫必然有好多好處，在自己封裝表格的時(shí)候發(fā)現(xiàn)表格的需求功能還是比較多的，而分開擴(kuò)展功能會(huì)更方便擴(kuò)展，并滿足需求，如：固定表頭，流體高度。
看antd的頁面代碼會(huì)發(fā)現(xiàn)前面簡(jiǎn)單的表格是沒分開的，到固定表頭功能時(shí)分開了，這樣的話，可能寫兩套的渲染方法了。
分開后當(dāng)有橫向的滾動(dòng)條時(shí)，滾動(dòng)條是在tbody這一層的，thead要跟著滾動(dòng)，則需監(jiān)聽滾動(dòng)條讓thead的滾動(dòng)距離等于tbody的滾動(dòng)距離。

bodyWrap.addEventListener('scroll', ()=>{
    headerWrap.scrollLeft = bodyWrap.scrollLeft
}, false)

表格封裝固定列會(huì)是個(gè)難點(diǎn)之一。

image.png

圖中代碼可以看出，它套了2層的table，再使用設(shè)置顯示寬度和定位的布局讓一個(gè)table固定在左邊。此時(shí)的豎向滾動(dòng)條是table1的，鼠標(biāo)在table2的時(shí)候不能滾動(dòng)，監(jiān)聽table2的鼠標(biāo)滾輪事件，然后把滾動(dòng)距離賦值給table1，這就是elementUI鼠標(biāo)在固定列時(shí)滾動(dòng)沒有平滑效果的原因吧。這里可以參考antd的布局，讓父的寬度小于tbody的滾動(dòng)條寬度，在父級(jí)overflow: hidden;就把滾動(dòng)條遮掉了。