Css - How to scroll only data rows in table?

zoran
May 3, 2023
230 views
3 votes
3 Answers

I have a html page with some content on top and table below. How to make the top content and head of table fixed on page and enable only data rows to scroll?

I find only very complicated solutions with javascript, but I wonder does exist some simpler way to do that. The html page is like this:

    <div>
      top content
    </div>
    <table>
      <thead>
        <tr><th> ... first header row
        <tr><th> ... second header row
      </thead>
      <tbody>
        ... data rows
      </tbody>
    </table>

Answers

You can use CSS.

.mytable tbody{
  display:block;
  overflow:auto;
  height:50px; /* set table height here */
  width:100%; 
}
.mytable thead tr{
  display:block;
}

<div>
    top content
</div>
<table class="mytable">
    <thead>
        <tr>
            <th>thead td 1</th>
            <th>thead td 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>cell 1</td>
            <td>cell 2</td>
        </tr>
    <tr>
      <td>cell 1</td>
      <td>cell 2</td>
    </tr>
    <tr>
      <td>cell 1</td>
      <td>cell 2</td>
    </tr>
    <tr>
      <td>cell 1</td>
      <td>cell 2</td>
    </tr>
    </tbody>
</table>

Give position: sticky; top: 0; to your th elements. Or you can give fix height to your tbody and add overflow-y:auto

.tableFixHead {
  overflow: auto;
  height: 80vh;
}
.tableFixHead thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

table {
  border-collapse: collapse;
  width: 100%;
}
th,
td {
  padding: 8px 16px;
}
th {
  background: #eee;
}

<div>
  <h1>EMPLOYEE DATA FOR MAY 2023</h1>
</div>
<div class="tableFixHead">
  <table>
    <thead>
      <tr><th>SR.NO</th><th>EMPLOYEE</th></tr>
    </thead>
    <tbody>
      <tr><td>1</td><td>Hritik</td></tr>
      <tr><td>2</td><td>Jay</td></tr>
      <tr><td>3</td><td>Rohit</td></tr>
      <tr><td>4</td><td>Nishant</td></tr>
      <tr><td>5</td><td>Mayur</td></tr>
      <tr><td>1</td><td>Hritik</td></tr>
      <tr><td>2</td><td>Jay</td></tr>
      <tr><td>3</td><td>Rohit</td></tr>
      <tr><td>4</td><td>Nishant</td></tr>
      <tr><td>5</td><td>Mayur</td></tr>
      <tr><td>1</td><td>Hritik</td></tr>
      <tr><td>2</td><td>Jay</td></tr>
      <tr><td>3</td><td>Rohit</td></tr>
      <tr><td>4</td><td>Nishant</td></tr>
      <tr><td>5</td><td>Mayur</td></tr>
      <tr><td>1</td><td>Hritik</td></tr>
      <tr><td>2</td><td>Jay</td></tr>
      <tr><td>3</td><td>Rohit</td></tr>
      <tr><td>4</td><td>Nishant</td></tr>
      <tr><td>5</td><td>Mayur</td></tr>
      <tr><td>1</td><td>Hritik</td></tr>
      <tr><td>2</td><td>Jay</td></tr>
      <tr><td>3</td><td>Rohit</td></tr>
      <tr><td>4</td><td>Nishant</td></tr>
      <tr><td>5</td><td>Mayur</td></tr>
      <tr><td>1</td><td>Hritik</td></tr>
      <tr><td>2</td><td>Jay</td></tr>
      <tr><td>3</td><td>Rohit</td></tr>
      <tr><td>4</td><td>Nishant</td></tr>
      <tr><td>5</td><td>Mayur</td></tr>
      <tr><td>1</td><td>Hritik</td></tr>
      <tr><td>2</td><td>Jay</td></tr>
      <tr><td>3</td><td>Rohit</td></tr>
      <tr><td>4</td><td>Nishant</td></tr>
      <tr><td>5</td><td>Mayur</td></tr>
      <tr><td>1</td><td>Hritik</td></tr>
      <tr><td>2</td><td>Jay</td></tr>
      <tr><td>3</td><td>Rohit</td></tr>
      <tr><td>4</td><td>Nishant</td></tr>
      <tr><td>5</td><td>Mayur</td></tr>
      <tr><td>1</td><td>Hritik</td></tr>
      <tr><td>2</td><td>Jay</td></tr>
      <tr><td>3</td><td>Rohit</td></tr>
      <tr><td>4</td><td>Nishant</td></tr>
      <tr><td>5</td><td>Mayur</td></tr>
    </tbody>
  </table>
</div>

In the snippet below, the HTML and CSS part are resolving the scrollability of tbody, whereas, for the purpose of filling the gap between the upper content and the lower and of the screen, I applied Javascript.

window.addEventListener('load', function() {
    let foo = document.getElementById('foo');
    let fooBody = foo.querySelector('tbody');
    fooBody.style.height = 0.9 * (window.innerHeight - fooBody.getBoundingClientRect().top) + "px";
});

thead, tbody {
    display: block;
}

tbody {
    overflow-y: auto;
}

    <div>
      top content
    </div>
    <table id="foo">
      <thead>
        <tr><th>... first header row</th></tr>
        <tr><th>... second header row</th></tr>
      </thead>
      <tbody>
        <tr><td>1</td></tr>
        <tr><td>2</td></tr>
        <tr><td>3</td></tr>
        <tr><td>4</td></tr>
        <tr><td>5</td></tr>
        <tr><td>6</td></tr>
        <tr><td>7</td></tr>
        <tr><td>8</td></tr>
        <tr><td>9</td></tr>
        <tr><td>10</td></tr>
        <tr><td>11</td></tr>
        <tr><td>12</td></tr>
        <tr><td>13</td></tr>
        <tr><td>14</td></tr>
        <tr><td>15</td></tr>
        <tr><td>16</td></tr>
        <tr><td>17</td></tr>
        <tr><td>18</td></tr>
        <tr><td>19</td></tr>
        <tr><td>20</td></tr>
        <tr><td>21</td></tr>
        <tr><td>22</td></tr>
        <tr><td>23</td></tr>
        <tr><td>24</td></tr>
        <tr><td>25</td></tr>
        <tr><td>26</td></tr>
        <tr><td>27</td></tr>
        <tr><td>28</td></tr>
        <tr><td>29</td></tr>
      </tbody>
    </table>

Please signup or login to give your own answer.

Click here to cancel reply.

Css – How to scroll only data rows in table?

Answers