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

Question

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

(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...

I upvoted because you included a picture that shows what you want. Most posters give a vague description that is ambiguous and/or contradictory. — dgrogan, Nov 14 '18 at 19:25

svandewiel · Accepted Answer · 2018-11-14T15:29:42.490

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>

thanks. To note, that usually one-link solutions aren't welcome as SO answers... should explain or add some code examples... imagine the link "'dies"? — serge, Nov 14 '18 at 14:45
the second, in that answer the table header remains on the top of the page only when the page is scrolled down, is not my case, I need just to scroll the tbody even if the table is on the bottom of the page — serge, Nov 14 '18 at 14:48
Thank you for the feedback to this. I'll be sure to note it and put it in next time. — svandewiel, Nov 14 '18 at 14:52
I got some news! I think that I found something that could help you get further. If you give your body a display block it seems to work. — svandewiel, Nov 14 '18 at 14:56
I'm working a bit on it, its kinda strange but I feel like I'm going in the right direction — svandewiel, Nov 14 '18 at 15:12
I hope I have the solution right now. I changed my awnser and he I'll put the link again for what I did. https://codepen.io/svandewiel/pen/eQvLVo?editors=1100 — svandewiel, Nov 14 '18 at 15:22
so, you mainly added `tr { display: block; width: 100%; }` in order to make it work — serge, Nov 14 '18 at 15:37
@Serge Glad I could help you with it :D Was fun to find out the problem as well. So thank you as well — svandewiel, Nov 14 '18 at 15:38
there is no need of thead nor tbody as block in that case, nor tbody width: 100% ;) — serge, Nov 14 '18 at 15:41

score 0 · Answer 2 · edited Nov 14 '18 at 15:02

Try adding display:block to your thead and tbody. If you want the backgrounds on your rows you might need to set a fixed width on the columns.

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>

the problem is the width of the last column, not auto – serge Nov 14 '18 at 14:58 — serge, Nov 14 '18 at 14:58
I mean, the last column should fill-in the remaining space – serge Nov 14 '18 at 15:03 — serge, Nov 14 '18 at 15:03

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

2 Answers2