htmlcsshtml-tablehtml-tbody

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

I try to obtain a sticky header on a html table, like in the picture

enter image description here

(by auto width I mean the last column should fill-in the remaining space)

My CodePen is here

but it seems the 

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

does not work...

Solution

  • I looked a bit more at the code and tried something to make it work, this is the what I came with. I hope that it's the solution that you're looking for!

    To clarify a bit what I did. I added a display:block to the tbody of the table and gave the tr a display:block and 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>