在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML5  HTML/ 表格布局表格行滾動(dòng)時(shí)固定表頭的問(wèn)題？

表格布局表格行滾動(dòng)時(shí)固定表頭的問(wèn)題？

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

縱向滾動(dòng)表格行，表頭固定在頂端；橫向滾動(dòng)表格行，表頭隨著滾動(dòng)？

圖片描述

回答
編輯回答
毀與悔

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

恩對(duì)我沒(méi)做過(guò)這個(gè)功能,以上都是我的理想狀態(tài)想象的.

2017年6月18日 00:47
編輯回答
獨(dú)白

說(shuō)說(shuō)我的實(shí)踐吧

<!--這就是所謂的表頭-->
<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>

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

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

下面來(lái)說(shuō)說(shuō)滾動(dòng)同步：

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

2、橫向
如果需要橫向滾動(dòng)，前提就是要給定table的寬度。這樣col計(jì)算的時(shí)候才會(huì)撐開(kāi)

原理就是：監(jiān)聽(tīng)第二個(gè)表格的scroll事件，獲取滾動(dòng)位移，同時(shí)同步地把這個(gè)滾動(dòng)位移賦值給第一個(gè)表格。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