web-dev-qa-db-ja.com

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

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

csscss-tables
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