how to scroll tbody while keeping table head fixed?

Question

I have dynamically created bootstrap table and want to have my tbody scrollable while keeping head fixed but I am not able to do it. I want to do this with css. As I am creating the table dynamically, it is different from creating table using html , as I am using jquery . I want answer according to my code as I am not able to apply other answers regarding these type of question.

Here is the code with less table content-

var table = $("<table class='table'>");
table.append($("<thead><tr><th scope='col'>col1</th><th scope='col'>col2</th><th scope='col'>col3</th><th scope='col'>col4</th><th scope='col'>col5</th></tr><thead/>"));
for (var j = 0; j < 2; j++) {
  var row = $('<tbody><tr class="parent_row" >' + '<td>' + "1" + '</td>' + '<td>' + "2" + '</td>' + '<td>' + "3" + '</td>' + '<td>' + "" + '</td>' + '<td>' + "" + '</td></tr><tbody/>');

  table.append(row);
  //child row
  for (var i = 0; i < 2; i++) {
    var row = $('<tr style="display: none">' + '<td>' + "" + '</td>' + '<td>' + "" + '</td>' + '<td>' + "" + '</td>' + '<td>' + "4" + '</td>' + '<td>' + "5" + '</td></tr>');


    table.append(row);


    $("#table").html(table);
    $("#table").show();
    $('.parent_row').on("click", function(e) {
      e.preventDefault();
      $(this).closest('.parent_row').nextUntil('.parent_row').toggle();
    })
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">

</table>

Possible duplicate of https://stackoverflow.com/questions/24840074/how-to-stick-table-headerthead-on-top-while-scrolling-down-the-table-rows-with - does this answer your question? — Constantin Groß, Dec 13 '19 at 06:21
You might need 2 tables where top table is for the heading and the bottom one is for scrolling. — XPD, Dec 13 '19 at 06:21
This may help https://stackoverflow.com/questions/47723996/table-with-fixed-thead-and-scrollable-tbody — Yudiz Solutions, Dec 13 '19 at 06:58
Does this answer your question? [How to stick table header(thead) on top while scrolling down the table rows with fixed header(navbar) in bootstrap 3?](https://stackoverflow.com/questions/24840074/how-to-stick-table-headerthead-on-top-while-scrolling-down-the-table-rows-with) — Awais, Dec 13 '19 at 07:09
@Awais it not working, alignment problem is there and also scroll is not working properly, could you please tell me with the help of my code, it will be more helpful. — Abhay Singh, Dec 13 '19 at 07:23

Praveen Reddy · Answer 1 · 2019-12-13T08:21:53.690

0

oveflow property does'nt apply to the tbody by default. To acheive that set display:block to tbody so that we can apply height and overflow to it. then set display:block to thead tr

tbody {
display:block;
overflow: auto;
height: 200px;
width: 100%;
}

thead tr {
display: block;
}

you can follow this link here

edited Dec 13 '19 at 08:21

answered Dec 13 '19 at 07:00

Praveen Reddy

33
1
9

@AbhaySingh follow the link which i have added to the answer. it may work for you – Praveen Reddy Dec 13 '19 at 08:51

score 0 · Answer 2 · answered Dec 13 '19 at 07:29

Add these styles

#table {
    /* position: relative; */
    height: 100px; change height according to your need
    overflow: scroll;
    display: block;
}
#table .table>thead>tr>th {
    vertical-align: bottom;
    border-bottom: 2px solid #ddd;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 5;
    background: #fff;
}

Working Snippet

var table = $("<table class='table'>");
table.append($("<thead><tr><th scope='col'>col1</th><th scope='col'>col2</th><th scope='col'>col3</th><th scope='col'>col4</th><th scope='col'>col5</th></tr><thead/>"));
for (var j = 0; j < 2; j++) {
  var row = $('<tbody><tr class="parent_row" >' + '<td>' + "1" + '</td>' + '<td>' + "2" + '</td>' + '<td>' + "3" + '</td>' + '<td>' + "" + '</td>' + '<td>' + "" + '</td></tr><tbody/>');

  table.append(row);
  //child row
  for (var i = 0; i < 2; i++) {
    var row = $('<tr style="display: none">' + '<td>' + "" + '</td>' + '<td>' + "" + '</td>' + '<td>' + "" + '</td>' + '<td>' + "4" + '</td>' + '<td>' + "5" + '</td></tr>');


    table.append(row);


    $("#table").html(table);
    $("#table").show();
    $('.parent_row').on("click", function(e) {
      e.preventDefault();
      $(this).closest('.parent_row').nextUntil('.parent_row').toggle();
    })
  }
}

#table {
        /* position: relative; */
        height: 100px; 
        overflow: scroll;
        display: block;
    }
    #table .table>thead>tr>th {
        vertical-align: bottom;
        border-bottom: 2px solid #ddd;
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 5;
        background: #fff;
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">

</table>

how to scroll tbody while keeping table head fixed?

2 Answers2