2017-05-08 111 views
0

https://codepen.io/anon/pen/VbyzER有没有办法隐藏垂直溢出的表格?

<div> <!-- Div has set height, overflow hidden--> 
    <table> 
    <!-- Tons of rows --> 
    </table> 
</div> 

忽略内联CSS的混乱。无论我做什么,该表似乎都会溢出其包装div。

+0

似乎按预期方式工作?如果你想隐藏没有滚动条的溢出,你需要将'overflow-y:auto'改为'overflow-y:hidden' – Cfreak

+0

@Cfreak似乎没有工作?用dev控制台检查桌面http://i.imgur.com/tW16LVf.png – user2980081

+1

我在自己的例子中改变了它,它工作正常。如果你在其他代码中运行它,那么其他的东西是错误的。 – Cfreak

回答

0

你有

#wrapper { 
    height: 300px; 
    overflow-x: hidden; 
    overflow-y: auto; 
} 

替代或补充,overflow-x: hidden,你应该使用overflow-y: hidden

如果它不适合你,你还在做其他事情。

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <style> 
 
      div { 
 
       border:solid 1px red; 
 
       height:128px; 
 
       overflow-y:hidden; 
 
      } 
 
     </style> 
 
    </head> 
 

 
    <body> 
 
     <div> 
 
      <table> 
 
       <tr><td>X</td></tr> 
 
       <tr><td>X</td></tr> 
 
       <tr><td>X</td></tr> 
 
       <tr><td>X</td></tr> 
 
       <tr><td>X</td></tr> 
 
       <tr><td>X</td></tr> 
 
       <tr><td>X</td></tr> 
 
       <tr><td>X</td></tr> 
 
       <tr><td>X</td></tr> 
 
       <tr><td>X</td></tr> 
 
       <tr><td>X</td></tr> 
 
       <tr><td>X</td></tr> 
 
       <tr><td>X</td></tr> 
 
       <tr><td>X</td></tr> 
 
       <tr><td>X</td></tr> 
 
       <tr><td>X</td></tr> 
 
       <tr><td>X</td></tr> 
 
       <tr><td>X</td></tr> 
 
      </table> 
 
     </div> 
 
    </body> 
 
</html>

+0

似乎没有工作?使用dev控制台http://i.imgur.com/tW16LVf.png检查表格元素 – user2980081