HTML テーブルのオーバーフロー スクロールで tbody の高さを適切に設定する方法

オーバーフロー スクロールによる tbody の高さの設定

HTML でテーブルを操作する場合、tbody 要素を有効にする際に tbody 要素の高さを制限する必要がある場合があります。オーバーフロースクロール。残念ながら、tbody で display:scroll プロパティを使用するだけでは不十分です。

目的の効果を実現するには、CSS プロパティの組み合わせが必要です。

1。ブロック表示:

tbody に表示: ブロックを設定して、テーブル フローから切り離し、独自の幅と高さを占有できるようにします。

2.固定高さ:

tbody で高さ: 50px (または必要に応じて) を指定して、高さを定義します。

3.テーブル行のテーブル表示:

テーブル本体の tr 要素に display: table を設定して、テーブルのような動作を保持します。

4.固定テーブル レイアウト:

テーブル レイアウトを使用: セルが均等に分散されるように、thead と tbody tr に固定されます。

5.ヘッド幅の調整:

スクロールバーの幅を補正するには、width: calc(100% - 1em).

例:

table, tr td {
  border: 1px solid red;
}
tbody {
  display: block;
  height: 50px;
  overflow: auto;
}
thead, tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}
thead {
  width: calc(100% - 1em);
}
table {
  width: 400px;
}

注:

最初は、本体がコンテンツが指定された高さよりも短いです。いつでもスクロールバーを表示できるようにするには、tbody で overflow-y:scroll を設定します。

さらに、グリッド レイアウトや JavaScript ベースのソリューションなどの他のオプションと比較して、このアプローチの制限を考慮することが重要です。

以上がHTML テーブルのオーバーフロー スクロールで tbody の高さを適切に設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。