html - 具有固定标题和 tbody 自动高度的表格

我最初的帖子表述不当，因此我决定简化我的问题并重试。 (如有不便，敬请谅解!)

我有一个容器 DIV(固定高度)，想在里面垂直放置一张 table 。该表具有固定的标题和可滚动的主体。我希望 tbody 自动调整到周围容器的高度(减去 thead)。

.tbody {height: auto;}

不幸的是什么都不做。你知道一些技巧(flexbox？)来实现我的目标吗？

请参阅附件/codepen 作为起点...

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)列宽、滚动条的样式等。

最佳答案

我正在尝试复制您的图像。这是您需要的布局吗？

body {
  display: grid;
  place-content: center;
  height: 100vh;
}
.container {
  height: 30vh;
  overflow-y: scroll;
  border: 3px solid black;
}
.table {
  width: 30vw;
  min-width: 240px;
  border-collapse: collapse;
  overflow-y: scroll;
  display: block;
}
.table thead {
  position: absolute;
  background: white;
}
.table thead th {
  padding-right: 10px;
}
.table tbody tr:first-child td {
  padding-top: 30px;
}
.element {
  background: tomato;
  border: 3px solid black;
}
.element + .element {
  border-top: none;
}

<div class="container">
  <table class="table">
    <thead>
      <tr>
        <th>Company</th>
        <th>Contact</th>
        <th>Country</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>company one</td>
        <td>name one</td>
        <td>place one</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>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>

关于html - 具有固定标题和 tbody 自动高度的表格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53614725/

html - 具有固定标题和 tbody 自动高度的表格

上一篇：css - 如何让页脚停留在网页底部？

下一篇：html - 具有固定标题和可滚动 x-y 正文的 Css 表格