0

私の最初の投稿は定式化が不十分だったため、質問を単純化してもう一度試すことにしました。（ご不便をかけて申し訳ありません！）

コンテナー DIV (高さ固定) があり、その中にテーブルを垂直に収めたいと考えています。テーブルには固定ヘッダーとスクロール可能な tbody があります。tbody を周囲のコンテナの高さに自動的に調整したい (ヘッドを差し引いたもの)。

例

.tbody {height: auto;}

残念ながら何もしません。私の目標を達成するためのトリック（フレックスボックス？）を知っていますか？

出発点として、添付ファイル/codepen を参照してください...

コードペン

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}

.container {	/* wrapper element for table */
  width: 20%;
  height: 20%;
  background-color: lightcoral;
  border: 3px solid black;
}

.tableX {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  text-align: left;
  border: 1px dotted black;
}

.tableX thead {
  display: block;
  color: white;
  background-color: darkgray;
}

.tableX tbody {
  display: block;
  overflow-y: auto;
  color: black;
  height: 100px;	/* ----> this is the problem, I don't want a fixed height... */
}

.tableX tr {
  height: 1.5rem;
}
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>TableTerror</title>
  <link rel="stylesheet" href="tableTerror.css">
</head>
<body>
  <div class="container">
    <table class="tableX">
      <thead>
        <tr>
          <th>Company</th>
          <th>Contact</th>
          <th>Country</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>first company</td>
          <td>first name</td>
          <td>first place</td>
        </tr>
        <tr>
          <td>some company</td>
          <td>some name</td>
          <td>some place</td>
        </tr>
        <tr>
          <td>some company</td>
          <td>some name</td>
          <td>some place</td>
        </tr> 
        <tr>
          <td>some company</td>
          <td>some name</td>
          <td>some place</td>
        </tr>
        <tr>
          <td>last company</td>
          <td>last name</td>
          <td>last place</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>

PS: 列幅、スクロールバーのスタイルなど (atm) は気にしません。

4

1 に答える 1