Fixed table header row in bootstrap

Question

Need to display header row always and added position:fixed css to the top row. But facing two issues:

First header row is displayed over to the first row in body.
First header row is not having same width of body rows.

Real Project table contains 25 columns and included bootstrap.

<table class="table table-bordered table-fixed">
<thead>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Email</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>john@example.com</td>
  </tr>
  <tr>
    <td>Mary</td>
    <td>Moe</td>
    <td>mary@example.com</td>
  </tr>
</table>

Css

table thead tr{position:fixed;}

https://jsfiddle.net/anieshjoseph/rrbsk9eq/

Got some js codes from stackoverflow but none of the worked for my case. My project included bootstrap css & js files. I am doubted that, will that cause any role in preventing the js codes I tried. — Web_Developer, Oct 21 '16 at 14:18

score 0 · Answer 1 · edited May 23 '17 at 10:27

Got stackoverflow answer to this issue.

  <div id="table-container">
  <table class="table table-bordered table-fixed" id="maintable">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
    </tbody>
  </table>
  <div id="bottom_anchor"></div>
</div>

Following is the css:

thead{
    background-color:white;
}
#maintable{width: 100%}

This also needs some javascript code based on table, its container & bottom div.

  function moveScroll(){
    var scroll = $(window).scrollTop();
    var anchor_top = $("#maintable").offset().top;
    var anchor_bottom = $("#bottom_anchor").offset().top;
    if (scroll > anchor_top && scroll < anchor_bottom) {
        clone_table = $("#clone");
        if(clone_table.length === 0) {          
            clone_table = $("#maintable").clone();
            clone_table.attr({id: "clone"})
            .css({
                position: "fixed",
                "pointer-events": "none",
                 top:0
            })
            .width($("#maintable").width());

            $("#table-container").append(clone_table);
            // dont hide the whole table or you lose border style & 
            // actively match the inline width to the #maintable width if the 
            // container holding the table (window, iframe, div) changes width          
            $("#clone").width($("#maintable").width());
            // only the clone thead remains visible
            $("#clone thead").css({
                visibility:"visible"
            });
            // clone tbody is hidden
            $("#clone tbody").css({
                visibility:"hidden"
            });
            // add support for a tfoot element
            // and hide its cloned version too
            var footEl = $("#clone tfoot");
            if(footEl.length){
                footEl.css({
                    visibility:"hidden"
                });
            }
        }
    } 
    else {
        $("#clone").remove();
    }
}
$(window).scroll(moveScroll);

JSFiddle Link

Fixed table header row in bootstrap

1 Answers1