2017-05-08 9 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は動作していませんか?デベロッパーコンソールでテーブルを調べてください。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

doesntは動作しているようですか?デベロッパーコンソールを使用してテーブル要素を調べるhttp://i.imgur.com/tW16LVf.png – user2980081

関連する問題