table左邊固定-底部橫向滾動條


是日有需求,曾探討過table表單頭部、尾部固定不動,中間內容隨着滾動條的滾動而變化。

整合資料之際,發現有很多表格,表單展現中,橫向數據很多、很長,不方便查看。

則,橫空霹靂出了,此款:table表單左邊固定,底部滾動條左右滑動展現數據demo。

原理很簡單:在 table外面嵌套一層div ,並且設置此父div {overflow: auto;}.此舉為了出席橫向滾動條

對里面的tr設置{position: relative;}相對定位 對tr里面的第一個td設置fixed

.fixed { position: fixed; background: #069DD5!important; color: #fff; width: 37px; height: 30px; line-height: 30px; }

同時為了撐開 左邊固定的位置,在第二個td位置,設置一個空的td

  .td-empty { width: 60px; height: 30px; padding: 0!important; display: inline-block; } 則可實現,table表單左邊第一列固定,拖動底部滾動條進行滾動顯示數據。

可參考 之前寫的 http://www.cnblogs.com/leshao/p/5697177.html (table頭部、尾部固定;中間內容定高自適應滾動)

特此鳴謝 Ruthless。

參考了 Ruthless的 http://www.cnblogs.com/linjiqin/archive/2013/06/21/3148225.html#undefined文章,得以完善

感謝 lost,雨安合一 等

下載地址

http://files.cnblogs.com/files/leshao/table%E5%B7%A6%E8%BE%B9%E5%9B%BA%E5%AE%9A-%E5%BA%95%E9%83%A8%E6%A8%AA%E5%90%91%E6%BB%9A%E5%8A%A8%E6%9D%A1.rar


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM