實現表格標題和內容列對齊的內嵌滾動方法


    最近有個活,需要做一個內嵌表格,第一行爲標題,其餘爲數據行,現在就是要在保證標題列和數據列對齊的情況下,實現數據內容的內嵌滾動。


    這裏簡單介紹兩種方法,第一種最爲簡單,但是有一點瑕疵;第二種辦法稍微複雜一點,但可以避免前面方法的問題,但同樣有一點小問題,我們可以根據我們的具體應用來進行選擇:


    從網上搜了一下,發現一種思路,也是比較簡單的一種方式:



    其原理就是利用position:relative; 來將標題行懸浮在頁面上,從而達到固定標題行的目的,但是在實際測試過程中,我們發現在一些瀏覽器中(IE的不同版本),有一些可以正常顯示,但有一些在拉動滾動條的時候,標題行會發生輕微抖動,感覺很是不好,於是我們就想到下面一個解決這個問題的辦法:



    當然,還需要一行默認執行的腳本:

    document.all(“table2”).style.widh = docment.all(“table1”).clientWidth;

    其工作原理就是,通過先展現列表,然後再通過腳本來最後調整一下,因爲在普通屏中一般是不需要調整的,但在一些寬屏上可能會出現一點點偏差,這時就需要腳本進行最後的一點調整工作。




發佈了169 篇原創文章 · 獲贊 5 · 訪問量 39萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章