最近有個活,需要做一個內嵌表格,第一行爲標題,其餘爲數據行,現在就是要在保證標題列和數據列對齊的情況下,實現數據內容的內嵌滾動。
這裏簡單介紹兩種方法,第一種最爲簡單,但是有一點瑕疵;第二種辦法稍微複雜一點,但可以避免前面方法的問題,但同樣有一點小問題,我們可以根據我們的具體應用來進行選擇:
從網上搜了一下,發現一種思路,也是比較簡單的一種方式:
其原理就是利用position:relative; 來將標題行懸浮在頁面上,從而達到固定標題行的目的,但是在實際測試過程中,我們發現在一些瀏覽器中(IE的不同版本),有一些可以正常顯示,但有一些在拉動滾動條的時候,標題行會發生輕微抖動,感覺很是不好,於是我們就想到下面一個解決這個問題的辦法:
當然,還需要一行默認執行的腳本:
document.all(“table2”).style.widh = docment.all(“table1”).clientWidth;
其工作原理就是,通過先展現列表,然後再通過腳本來最後調整一下,因爲在普通屏中一般是不需要調整的,但在一些寬屏上可能會出現一點點偏差,這時就需要腳本進行最後的一點調整工作。