web-dev-qa-db-ja.com

垂直スクロールバーが表示されるようにテーブルの高さを指定するにはどうすればよいですか?

ページに多くの行があるテーブルがあります。テーブルの高さがそれよりも大きい場合、垂直スクロールバーが表示されるように、テーブルの高さを、たとえば500pxに設定したいと思います。 heightでCSS table属性を使用しようとしましたが、機能しません。

96
Misha Moroshko

overflow CSSプロパティを使用してみてください。また、水平オーバーフロー(overflow-x)と垂直オーバーフロー(overflow-y)の動作を定義する個別のプロパティもあります。

垂直スクロールだけが必要なので、これを試してください:

table {
  height: 500px;
  overflow-y: scroll;
}

編集:

どうやら<table>要素はoverflowプロパティを尊重しません。これは、<table>要素がデフォルトでdisplay: blockとしてレンダリングされないためです(実際には独自の表示タイプがあります)。 <table>要素をブロックタイプに設定することにより、overflowプロパティを強制的に機能させることができます。

table {
  display: block;
  height: 500px;
  overflow-y: scroll;
}

これにより、要素の幅が100%になるため、ページの水平方向の幅全体を占めたくない場合は、要素の幅も明示的に指定する必要があります。

157
AgentConundrum

テーブルを別の要素内にラップし、その要素の高さを設定する必要があります。インラインcssの例:

<div style="height: 500px; overflow: auto;">
 <table>
 </table>
</div>
56
Dark Falcon

テーブルの高さを設定するには、最初にcssプロパティ「display:block」を設定する必要があります。次に、「width/height」プロパティを追加できます。このMozilla記事は、テーブルのスタイルを設定する方法を学ぶための非常に優れたリソースであることがわかりました。 Link

2
krupesh Anadkat