處理table 超出部分滾動問題


我們有個需求是這樣的,鑒於我的表達能力還是直接上原型圖吧

今天主要記錄上面的第四條解決過程。

首先我們的布局使用的table,當想給tbody設置高度的時候,發現不起作用。原因是table的默認是display:table,如果想設置高度需要改成display:block/inline-block。這樣改出現的問題是table的布局已經亂了。

所以我的布局結構是這樣的

hidden_scroll和上面head的寬度是一樣的,並設置overflow:hidden。

   tbody_container容器在有滾動條情況下會比沒有滾動條寬17px(一個滾動條的距離),vue中通過:class控制,在給固定高度,並設置overflow-y:scroll,就可以實現滾動效果並隱藏滾動條了

附上個已經做好的效果

 


免責聲明!

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



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