HTML 'tbody' 不滚动（忽略高度和溢出）

Question

我尝试在 html table 上获得粘性 header，如图所示

(by auto width 我的意思是最后一列应该 fill-in 剩下的 space)

我的 CodePen 是 here

但似乎

tbody {
  height: 300px;
  overflow-y: scroll;

不起作用...

Answer 1

我仔细查看了代码并尝试了一些使其工作的方法，这就是我带来的结果。我希望这是您正在寻找的解决方案！

澄清一下我做了什么。我在 table 的 tbody 添加了一个 display:block 并给了 tr a display:block 和 width:100%;

table.fixed-header {
  width: 100%;
  border: 1px solid red;
}
table.fixed-header thead {
  display: block;
}
table.fixed-header tbody {
  width: 100%;
  max-height: 300px;
  height: 300px;
  overflow-y: scroll;
  display: block;
}
table.fixed-header tbody td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
table.fixed-header tr {
  display: block;
  width: 100%;
}
table.fixed-header tr th:nth-child(2),
table.fixed-header tr td:nth-child(2) {
  width: 200px;
  max-width: 200px;
}
table.fixed-header tr th:nth-child(1),
table.fixed-header tr td:nth-child(1) {
  width: 100px;
  max-width: 100px;
}
table.fixed-header thead,
table.fixed-header tbody > tr:nth-child(even) {
  background-color: #ffffff;
}
table.fixed-header tbody > tr:nth-child(odd) {
  background-color: lightblue;
}
table.fixed-header th,
table.fixed-header td {
  padding: 5px;
  border-left: 1px solid darkgray;
}
.colored {
  background: lightgreen;
}
caption {
  caption-side: top;
}

<div class="container">
  <h3>Sticky header example</h3>
  <div class="col-md-10 col-md-offset-1 colored">
    <table class="fixed-header">
      <caption align="top">Requirements: sticky header, fill the remaining container, 3 rows height and vertical scroll</caption>
      <thead>
        <tr>
          <th>Id (100px)</th>
          <th>Name (200px)</th>
          <th>Description (auto)</th>
        </tr>
      </thead>
      <tr>
        <td>654</td>
        <td>name 1</td>
        <td>this is a description</td>
      </tr>
      <tr>
        <td>963</td>
        <td>long long long very long name 2</td>
        <td>this is the second description</td>
      </tr>
      <tr>
        <td>753</td>
        <td>name 3</td>
        <td>this is the third description</td>
      </tr>
      <tr>
        <td>224</td>
        <td>name 4</td>
        <td>this is the 4th description</td>
      </tr>
      <tr>
        <td>654</td>
        <td>name 1</td>
        <td>this is a description</td>
      </tr>
      <tr>
        <td>963</td>
        <td>long long long very long name 2</td>
        <td>this is the second description</td>
      </tr>
      <tr>
        <td>753</td>
        <td>name 3</td>
        <td>this is the third description</td>
      </tr>
      <tr>
        <td>224</td>
        <td>name 4</td>
        <td>this is the 4th description</td>
      </tr>
      <tr>
        <td>654</td>
        <td>name 1</td>
        <td>this is a description</td>
      </tr>
      <tr>
        <td>963</td>
        <td>long long long very long name 2</td>
        <td>this is the second description</td>
      </tr>
      <tr>
        <td>753</td>
        <td>name 3</td>
        <td>this is the third description</td>
      </tr>
      <tr>
        <td>224</td>
        <td>name 4</td>
        <td>this is the 4th description</td>
      </tr>
      <tr>
        <td>687</td>
        <td>name 5</td>
        <td>this is the third description</td>
      </tr>
      <tr>
        <td>354</td>
        <td>name 6</td>
        <td>this is the third description</td>
      </tr>
      <tr>
        <td>965</td>
        <td>name 7</td>
        <td>this is the third description</td>
      </tr>
      <tr>
        <td>456</td>
        <td>name 8</td>
        <td>this is the third description</td>
      </tr>
      <tr>
        <td>789</td>
        <td>name 9</td>
        <td>this is the third description</td>
      </tr>
    </table>
  </div>
</div>

Answer 2

尝试将 display:block 添加到您的 thead 和 tbody。如果您想要行上的背景，您可能需要在列上设置固定宽度。

table.fixed-header {
  width: 100%;
  border: 1px solid red;
  border-collapse: collapse;
}
table.fixed-header thead {
  display:block;
}
table.fixed-header tbody {
  width: 100%;
  max-height: 200px;
  height: 200px;
  overflow-y: scroll;
  display:block;
}
table.fixed-header tbody td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
table.fixed-header th:nth-child(2),
table.fixed-header td:nth-child(2) {
  width: 200px;
  max-width: 200px;
}
table.fixed-header th:nth-child(1),
table.fixed-header td:nth-child(1) {
  width: 100px;
  max-width: 100px;
}
table.fixed-header thead,
table.fixed-header tbody > tr:nth-child(even) {
  background-color: #ffffff;
}
table.fixed-header tbody > tr:nth-child(odd) {
  background-color: lightblue;
}
table.fixed-header th,
table.fixed-header td {
  padding: 5px;
  border-left: 1px solid darkgray;
}
.colored {
  background: lightgreen;
}
caption {
  caption-side: top;
}

<div class="container">
  <h3>Sticky header example</h3>
  <div class="col-md-10 col-md-offset-1 colored">
    <table class="fixed-header">
      <caption align="top">Requirements: sticky header, fill the remaining container, 3 rows height and vertical scroll</caption>
      <thead>
        <tr>
          <th>Id (100px)</th>
          <th>Name (200px)</th>
          <th>Description (auto)</th>
        </tr>
      </thead>
      <tr>
        <td>654</td>
        <td>name 1</td>
        <td>this is a description</td>
      </tr>
      <tr>
        <td>963</td>
        <td>long long long very long name 2</td>
        <td>this is the second description</td>
      </tr>
      <tr>
        <td>753</td>
        <td>name 3</td>
        <td>this is the third description</td>
      </tr>
      <tr>
        <td>224</td>
        <td>name 4</td>
        <td>this is the 4th description</td>
      </tr>
      <tr>
        <td>687</td>
        <td>name 5</td>
        <td>this is the third description</td>
      </tr>
      <tr>
        <td>354</td>
        <td>name 6</td>
        <td>this is the third description</td>
      </tr>
      <tr>
        <td>965</td>
        <td>name 7</td>
        <td>this is the third description</td>
      </tr>
      <tr>
        <td>456</td>
        <td>name 8</td>
        <td>this is the third description</td>
      </tr>
      <tr>
        <td>789</td>
        <td>name 9</td>
        <td>this is the third description</td>
      </tr>
    </table>
  </div>
</div>

HTML 'tbody' 不滚动（忽略高度和溢出）

HTML 'tbody' does not scroll (ignores the height and overflow)

html

css

html-table

html-tbody