鍍金池/ 問答/HTML5  HTML/ 表格布局表格行滾動時固定表頭的問題？

表格布局表格行滾動時固定表頭的問題？

如題詳述： 想實現(xiàn)下面的效果（明眼人一看就是假的）。

縱向滾動表格行，表頭固定在頂端；橫向滾動表格行，表頭隨著滾動？

圖片描述

回答
編輯回答
毀與悔

大容器定高 里面包含表頭和表內(nèi)容,記得是分開寫
表頭使用fixed定位,top:0
表內(nèi)容高度固定,padding-top:表頭高度 overflow-y:auto;overflow-x:hidden;

恩對我沒做過這個功能,以上都是我的理想狀態(tài)想象的.

2017年6月18日 00:47
編輯回答
獨白

說說我的實踐吧

<!--這就是所謂的表頭-->
<table>
    <colgroup>
        <col width="10%">
        <col width="50%">
        <col width="40%">
    </colgroup>
    <thead>
        <tr>
            <th>表頭1</th>
            <th>表頭2</th>
            <th>表頭3</th>
        </tr>
    </thead>
</table>

<!--這里才是所謂的表格真實內(nèi)容-->
<table>
    <colgroup>
        <col width="10%">
        <col width="50%">
        <col width="40%">
    </colgroup>
    <!--body-->
</table>

從上面的代碼中你會發(fā)現(xiàn)，兩個表格都有同樣的colgroup部分，這個就是用來做固定表格列寬的，保證不管內(nèi)容怎么變，大家的尺寸都同步。（解決了最大的問題）

下面來說說滾動同步：

1、豎向
按照樓上說的，可以有一個大容器（有個padding-top），第一個表格absolute定位。第二個表格定高，然后overflow-y: auto

2、橫向
如果需要橫向滾動，前提就是要給定table的寬度。這樣col計算的時候才會撐開

原理就是：監(jiān)聽第二個表格的scroll事件，獲取滾動位移，同時同步地把這個滾動位移賦值給第一個表格。scrollLeft

2017年4月6日 00:52
編輯回答
痞性
<div>  <!-- 固定寬，overflow-x:scroll -->
    <table>
        <thead>
            <tr>
                <th>表頭1</th>
                <th>表頭2</th>
                <th>表頭3</th>
            </tr>
        </thead>
    </table>
    <table> <!-- 固定高，overflow-y:scroll -->    
        <tbody>
            <tr>
                <td>單元格1</td>
                <td>單元格2</td>
                <td>單元格3</td>
            </tr>
        </tbody>
    </table>
</div>
2017年2月5日 20:46