是日有需求,曾探討過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