Scrollable table with column and header sticky

user_8118685 0
Viewed 500

Edited : 

   table {
            border: 1px solid white;
            text-align: center;
            padding: 6px;
            background: #e1edf9;
        }

        td {
            border: 1px solid white;
            text-align: center;
            padding: 8px;
            min-width: 120px;
        }

        td:first-child,
        th:first-child {
            background-color: #003a6a !important;
            color: white !important;

        }


        @media screen and (max-width: 780px) {


            .table-scroll {
                position: relative;
                width: 100%;
                z-index: 1;
                margin: auto;
                overflow: auto;
            }

            .table-scroll table {
                width: 100%;
                min-width: 1280px;
                margin: auto;
                /*   border-collapse: separate;*/
                border-spacing: 0;
            }

            .header {
                top: 0;
                position: sticky;
                z-index: 10000;
            }

            .side_header {
                position: sticky;
                left: 0;
                z-index: 20000;
            }

            .common_header {
                top: 0;
                left: 0;
                position: sticky;
                z-index: 30000;
            }
        }
<div id="table-scroll" class="table-scroll">
        <table id="data" class="main-table">
            <tbody>
            <tr>
                <th class="common_header">Header-1</th>
                <th class="header">Header-2</th>
                <th class="header">Header-3</th>
                <th class="header">Header-4</th>
                <th class="header">Header-5</th>
                <th class="header">Header-5</th>
                <th class="header">Header-4</th>
                <th class="header">Header-5</th>
                <th class="header">Header-5</th>
            </tr>
            <tr>
                <td class="side_header">Cell-1</td>
                <td>Cell-2</td>
                <td>Cell-3</td>
                <td>Cell-4</td>
                <td>Cell-5</td>
                <td>Cell-2</td>
                <td>Cell-3</td>
                <td>Cell-4</td>
                <td>Cell-5</td>
            </tr>

            <tr>
                <td class="side_header">Cell-7</td>
                <td>Cell-8</td>
                <td>Cell-9</td>
                <td>Cell-10</td>
                <td>Cell-11</td>
                <td>Cell-2</td>
                <td>Cell-3</td>
                <td>Cell-4</td>
                <td>Cell-5</td>
            </tr>

            <tr>
                <td class="side_header">Cell-7</td>
                <td>Cell-8</td>
                <td>Cell-9</td>
                <td>Cell-10</td>
                <td>Cell-11</td>
                <td>Cell-2</td>
                <td>Cell-3</td>
                <td>Cell-4</td>
                <td>Cell-5</td>
            </tr>
            <tr>
                <td class="side_header">Cell-7</td>
                <td>Cell-8</td>
                <td>Cell-9</td>
                <td>Cell-10</td>
                <td>Cell-11</td>
                <td>Cell-2</td>
                <td>Cell-3</td>
                <td>Cell-4</td>
                <td>Cell-5</td>
            </tr>
            <tr>
                <td class="side_header">Cell-7</td>
                <td>Cell-8</td>
                <td>Cell-9</td>
                <td>Cell-10</td>
                <td>Cell-11</td>
                <td>Cell-2</td>
                <td>Cell-3</td>
                <td>Cell-4</td>
                <td>Cell-5</td>
            </tr>
            <tr>
                <td class="side_header">Cell-7</td>
                <td>Cell-8</td>
                <td>Cell-9</td>
                <td>Cell-10</td>
                <td>Cell-11</td>
                <td>Cell-2</td>
                <td>Cell-3</td>
                <td>Cell-4</td>
                <td>Cell-5</td>
            </tr>
            <tr>
                <td class="side_header">Cell-7</td>
                <td>Cell-8</td>
                <td>Cell-9</td>
                <td>Cell-10</td>
                <td>Cell-11</td>
                <td>Cell-2</td>
                <td>Cell-3</td>
                <td>Cell-4</td>
                <td>Cell-5</td>
            </tr>
            <tr>
                <td class="side_header">Cell-7</td>
                <td>Cell-8</td>
                <td>Cell-9</td>
                <td>Cell-10</td>
                <td>Cell-11</td>
                <td>Cell-2</td>
                <td>Cell-3</td>
                <td>Cell-4</td>
                <td>Cell-5</td>
            </tr>
            <tr>
                <td class="side_header">Cell-7</td>
                <td>Cell-8</td>
                <td>Cell-9</td>
                <td>Cell-10</td>
                <td>Cell-11</td>
                <td>Cell-2</td>
                <td>Cell-3</td>
                <td>Cell-4</td>
                <td>Cell-5</td>
            </tr>
            <tr>
                <td class="side_header">Cell-7</td>
                <td>Cell-8</td>
                <td>Cell-9</td>
                <td>Cell-10</td>
                <td>Cell-11</td>
                <td>Cell-2</td>
                <td>Cell-3</td>
                <td>Cell-4</td>
                <td>Cell-5</td>
            </tr>
            <tr>
                <td class="side_header">Cell-7</td>
                <td>Cell-8</td>
                <td>Cell-9</td>
                <td>Cell-10</td>
                <td>Cell-11</td>
                <td>Cell-2</td>
                <td>Cell-3</td>
                <td>Cell-4</td>
                <td>Cell-5</td>
            </tr>
            <tr>
                <td class="side_header">Cell-7</td>
                <td>Cell-8</td>
                <td>Cell-9</td>
                <td>Cell-10</td>
                <td>Cell-11</td>
                <td>Cell-2</td>
                <td>Cell-3</td>
                <td>Cell-4</td>
                <td>Cell-5</td>
            </tr>
            <tr>
                <td class="side_header">Cell-7</td>
                <td>Cell-8</td>
                <td>Cell-9</td>
                <td>Cell-10</td>
                <td>Cell-11</td>
                <td>Cell-2</td>
                <td>Cell-3</td>
                <td>Cell-4</td>
                <td>Cell-5</td>
            </tr>
            <tr>
                <td class="side_header">Cell-7</td>
                <td>Cell-8</td>
                <td>Cell-9</td>
                <td>Cell-10</td>
                <td>Cell-11</td>
                <td>Cell-2</td>
                <td>Cell-3</td>
                <td>Cell-4</td>
                <td>Cell-5</td>
            </tr>
            <tr>
                <td class="side_header">Cell-7</td>
                <td>Cell-8</td>
                <td>Cell-9</td>
                <td>Cell-10</td>
                <td>Cell-11</td>
                <td>Cell-2</td>
                <td>Cell-3</td>
                <td>Cell-4</td>
                <td>Cell-5</td>
            </tr>
            <tr>
                <td class="side_header">Cell-7</td>
                <td>Cell-8</td>
                <td>Cell-9</td>
                <td>Cell-10</td>
                <td>Cell-11</td>
                <td>Cell-2</td>
                <td>Cell-3</td>
                <td>Cell-4</td>
                <td>Cell-5</td>
            </tr>
            <tr>
                <td class="side_header">Cell-7</td>
                <td>Cell-8</td>
                <td>Cell-9</td>
                <td>Cell-10</td>
                <td>Cell-11</td>
                <td>Cell-2</td>
                <td>Cell-3</td>
                <td>Cell-4</td>
                <td>Cell-5</td>
            </tr>

            <tr>
                <td class="side_header">Cell-7</td>
                <td>Cell-8</td>
                <td>Cell-9</td>
                <td>Cell-10</td>
                <td>Cell-11</td>
                <td>Cell-2</td>
                <td>Cell-3</td>
                <td>Cell-4</td>
                <td>Cell-5</td>
            </tr>
            <tr>
                <td class="side_header">Cell-7</td>
                <td>Cell-8</td>
                <td>Cell-9</td>
                <td>Cell-10</td>
                <td>Cell-11</td>
                <td>Cell-2</td>
                <td>Cell-3</td>
                <td>Cell-4</td>
                <td>Cell-5</td>
            </tr>

            <tr>
                <td class="side_header">Cell-7</td>
                <td>Cell-8</td>
                <td>Cell-9</td>
                <td>Cell-10</td>
                <td>Cell-11</td>
                <td>Cell-2</td>
                <td>Cell-3</td>
                <td>Cell-4</td>
                <td>Cell-5</td>
            </tr>

            <tr>
                <td class="side_header">Cell-7</td>
                <td>Cell-8</td>
                <td>Cell-9</td>
                <td>Cell-10</td>
                <td>Cell-11</td>
                <td>Cell-2</td>
                <td>Cell-3</td>
                <td>Cell-4</td>
                <td>Cell-5</td>
            </tr>

            <tr>
                <td class="side_header">Cell-7</td>
                <td>Cell-8</td>
                <td>Cell-9</td>
                <td>Cell-10</td>
                <td>Cell-11</td>
                <td>Cell-2</td>
                <td>Cell-3</td>
                <td>Cell-4</td>
                <td>Cell-5</td>
            </tr>
            <tr>
                <td class="side_header">Cell-7</td>
                <td>Cell-8</td>
                <td>Cell-9</td>
                <td>Cell-10</td>
                <td>Cell-11</td>
                <td>Cell-2</td>
                <td>Cell-3</td>
                <td>Cell-4</td>
                <td>Cell-5</td>
            </tr>
            <tr>
                <td class="side_header">Cell-7</td>
                <td>Cell-8</td>
                <td>Cell-9</td>
                <td>Cell-10</td>
                <td>Cell-11</td>
                <td>Cell-2</td>
                <td>Cell-3</td>
                <td>Cell-4</td>
                <td>Cell-5</td>
            </tr>
            <tr>
                <td class="side_header">Cell-7</td>
                <td>Cell-8</td>
                <td>Cell-9</td>
                <td>Cell-10</td>
                <td>Cell-11</td>
                <td>Cell-2</td>
                <td>Cell-3</td>
                <td>Cell-4</td>
                <td>Cell-5</td>
            </tr>
            <tr>
                <td class="side_header">Cell-7</td>
                <td>Cell-8</td>
                <td>Cell-9</td>
                <td>Cell-10</td>
                <td>Cell-11</td>
                <td>Cell-2</td>
                <td>Cell-3</td>
                <td>Cell-4</td>
                <td>Cell-5</td>
            </tr>

            <tr>
                <td class="side_header">Cell-7</td>
                <td>Cell-8</td>
                <td>Cell-9</td>
                <td>Cell-10</td>
                <td>Cell-11</td>
                <td>Cell-2</td>
                <td>Cell-3</td>
                <td>Cell-4</td>
                <td>Cell-5</td>
            </tr>
            <tr>
                <td class="side_header">Cell-7</td>
                <td>Cell-8</td>
                <td>Cell-9</td>
                <td>Cell-10</td>
                <td>Cell-11</td>
                <td>Cell-2</td>
                <td>Cell-3</td>
                <td>Cell-4</td>
                <td>Cell-5</td>
            </tr>
            <tr>
                <td class="side_header">Cell-7</td>
                <td>Cell-8</td>
                <td>Cell-9</td>
                <td>Cell-10</td>
                <td>Cell-11</td>
                <td>Cell-2</td>
                <td>Cell-3</td>
                <td>Cell-4</td>
                <td>Cell-5</td>
            </tr>
            <tr>
                <td class="side_header">Cell-7</td>
                <td>Cell-8</td>
                <td>Cell-9</td>
                <td>Cell-10</td>
                <td>Cell-11</td>
                <td>Cell-2</td>
                <td>Cell-3</td>
                <td>Cell-4</td>
                <td>Cell-5</td>
            </tr>
            </tr>
        </tbody>
        </table>
    </div>

Hi this is my code snippet I want to create sticky 1st column and header. Basically in mobile view I want my table to be scrollable but with first column(column 1-101) and header(header1-header4) to remain sticky and so that they are visible always. I have tried to put the first row and first column sticky, It is working for 1st column and making it sticky but it is not working for the header. Can anyone please help?

table {
            border: 1px solid white;
            text-align: center;
            padding: 6px;
            background: #e1edf9;
        }

        td {
            border: 1px solid white;
            text-align: center;
            padding: 6px;
        }

        td:first-child,
        tr:first-child {
            background-color: #003a6a !important;
            color: white !important;


        }

        .table-scroll {
            position: relative;
            width: 100%;
            z-index: 1;
            margin: auto;
            overflow: auto;
        }

        .table-scroll table {
            width: 100%;
            min-width: 1280px;
            margin: auto;
            border-collapse: separate;
            border-spacing: 0;
        }

        .table-wrap {
            position: relative;
        }

        .table-scroll tr:first-child {
            background: #333;
            color: #fff;
            position: -webkit-sticky;
            position: sticky;
            top: 0;
        }

        td:first-child {
            position: -webkit-sticky;
            position: sticky;
            left: 0;
            z-index: 2;
            background: #ccc;
        }

        .table-scroll tfoot tr {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  background: #666;
  color: #fff;
  z-index:4;
}

  

@media screen and (max-width: 500px){
    td:first-child {
            position: -webkit-sticky;
            position: sticky;
            left: 0;
            z-index: 2;
            background: #ccc;
            max-width: 140px;
        }
        
         tr:first-child {
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            z-index: 2;
            background: #ccc;
        }
        
}
<div><p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p></div>
<div id="table-scroll" class="table-scroll">
  <table id="main-table" class="main-table">
        <tbody>
                <tr>
          <td><b>Headers</b></td>
                <th><b>Header1</b>
                    <input type="checkbox" name="checkbox" value="checkbox">
                </th>
                <th><b>Header2</b>
                    <input type="checkbox" name="checkbox" value="checkbox">
                </th>
                <th><b>Header3</b>
                    <input type="checkbox" name="checkbox" value="checkbox">
                </th>
        <th><b>Header4</b>
                    <input type="checkbox" name="checkbox" value="checkbox">
                </th>
            </tr>
      <tr>
                <td>Cell content1</td>
                <td>Cell content2</td>
                <td>Cell content3</td>
                <td>Cell content4</td>
                <td>Cell content5</td>
            </tr>
            <tr>
                <td>Cell content11</td>
                <td>Cell content12</td>
                <td>Cell content13</td>
                <td>Cell content14</td>
                <td>Cell content15</td>
            </tr>
            <tr>
                <td>Cell content21</td>
                <td>Cell content22</td>
                <td>Cell content23</td>
                <td>Cell content24</td>
                <td>Cell content25</td>
            </tr>
            <tr>
                <td>Cell content31</td>
                <td>Cell content32</td>
                <td>Cell content33</td>
                <td>Cell content34</td>
                <td>Cell content35</td>
            </tr>
            <tr>
                <td>Cell content41</td>
                <td>Cell content42</td>
                <td>Cell content43</td>
                <td>Cell content44</td>
                <td>Cell content45</td>
            </tr>
            <tr>
                <td>Cell content51</td>
                <td>Cell content52</td>
                <td>Cell content53</td>
                <td>Cell content54</td>
                <td>Cell content55</td>
            </tr>
            <tr>
                <td>Cell content61</td>
                <td>Cell content62</td>
                <td>Cell content63</td>
                <td>Cell content64</td>
                <td>Cell content65</td>
            </tr>
            <tr>
                <td>Cell content1</td>
                <td>Cell content2</td>
                <td>Cell content3</td>
                <td>Cell content4</td>
                <td>Cell content5</td>
            </tr>
            <tr>
                <td>Cell content11</td>
                <td>Cell content12</td>
                <td>Cell content13</td>
                <td>Cell content14</td>
                <td>Cell content15</td>
            </tr>
            <tr>
                <td>Cell content21</td>
                <td>Cell content22</td>
                <td>Cell content23</td>
                <td>Cell content24</td>
                <td>Cell content25</td>
            </tr>
            <tr>
                <td>Cell content31</td>
                <td>Cell content32</td>
                <td>Cell content33</td>
                <td>Cell content34</td>
                <td>Cell content35</td>
            </tr>
            <tr>
                <td>Cell content41</td>
                <td>Cell content42</td>
                <td>Cell content43</td>
                <td>Cell content44</td>
                <td>Cell content45</td>
            </tr>
            <tr>
                <td>Cell content51</td>
                <td>Cell content52</td>
                <td>Cell content53</td>
                <td>Cell content54</td>
                <td>Cell content55</td>
            </tr>
            <tr>
                <td>Cell content61</td>
                <td>Cell content62</td>
                <td>Cell content63</td>
                <td>Cell content64</td>
                <td>Cell content65</td>
            </tr>
            <tr>
                <td>Cell content71</td>
                <td>Cell content72</td>
                <td>Cell content73</td>
                <td>Cell content74</td>
                <td>Cell content75</td>
            </tr>
            <tr>
                <td>Cell content81</td>
                <td>Cell content82</td>
                <td>Cell content83</td>
                <td>Cell content84</td>
                <td>Cell content85</td>
            </tr>
            <tr>
                <td>Cell content91</td>
                <td>Cell content92</td>
                <td>Cell content93</td>
                <td>Cell content94</td>
                <td>Cell content95</td>
            </tr>
            <tr>
                <td>Cell content101</td>
                <td>Cell content102</td>
                <td>Cell content103</td>
                <td>Cell content104</td>
                <td>Cell content105</td>
            </tr>
        </tbody>
    </table>
</div>

sticky html-table scroll css html
3 Answers

I sticked to the description of the question that the column and the header should be sticky.

Output Image:

enter image description here

This might work for you.

* {
  font-family: 'arial';
}

.container {
  max-width: 426px;
  width: 100%;
  height: 300px;
  overflow-x: auto;
}

table {
  border-collapse: collapse;
  width: 626px;
}

tr td,
tr th {
  box-shadow: 0px 0px 0px 1px white inset;
  padding: 20px 50px;
}

td {
  background: #e1edf9;
}

th {
  background: #003a6a;
  color: white;
  white-space: nowrap;
}

.header {
  top: 0;
  position: sticky;
  z-index: 10000;
}

.side_header {
  position: sticky;
  left: 0;
  z-index: 20000;
}

.common_header {
  top: 0;
  left: 0;
  position: sticky;
  z-index: 30000;
}
<div class="container">
  <table cellspacing="0">
    <tr>
      <th class="common_header">Header-1</th>
      <th class="header">Header-2</th>
      <th class="header">Header-3</th>
      <th class="header">Header-4</th>
      <th class="header">Header-5</th>
    </tr>
    <tr>
      <td class="side_header">Cell-1</td>
      <td>Cell-2</td>
      <td>Cell-3</td>
      <td>Cell-4</td>
      <td>Cell-5</td>
    </tr>

    <tr>
      <td class="side_header">Cell-7</td>
      <td>Cell-8</td>
      <td>Cell-9</td>
      <td>Cell-10</td>
      <td>Cell-11</td>
    </tr>

    <tr>
      <td class="side_header">Cell-12</td>
      <td>Cell-13</td>
      <td>Cell-14</td>
      <td>Cell-15</td>
      <td>Cell-16</td>
    </tr>

    <tr>
      <td class="side_header">Cell-17</td>
      <td>Cell-18</td>
      <td>Cell-19</td>
      <td>Cell-20</td>
      <td>Cell-21</td>
    </tr>

    <tr>
      <td class="side_header">Cell-1</td>
      <td>Cell-2</td>
      <td>Cell-3</td>
      <td>Cell-4</td>
      <td>Cell-5</td>
    </tr>

    <tr>
      <td class="side_header">Cell-7</td>
      <td>Cell-8</td>
      <td>Cell-9</td>
      <td>Cell-10</td>
      <td>Cell-11</td>
    </tr>

    <tr>
      <td class="side_header">Cell-12</td>
      <td>Cell-13</td>
      <td>Cell-14</td>
      <td>Cell-15</td>
      <td>Cell-16</td>
    </tr>

    <tr>
      <td class="side_header">Cell-17</td>
      <td>Cell-18</td>
      <td>Cell-19</td>
      <td>Cell-20</td>
      <td>Cell-21</td>
    </tr>

    <tr>
      <td class="side_header">Cell-1</td>
      <td>Cell-2</td>
      <td>Cell-3</td>
      <td>Cell-4</td>
      <td>Cell-5</td>
    </tr>

    <tr>
      <td class="side_header">Cell-7</td>
      <td>Cell-8</td>
      <td>Cell-9</td>
      <td>Cell-10</td>
      <td>Cell-11</td>
    </tr>

    <tr>
      <td class="side_header">Cell-12</td>
      <td>Cell-13</td>
      <td>Cell-14</td>
      <td>Cell-15</td>
      <td>Cell-16</td>
    </tr>

    <tr>
      <td class="side_header">Cell-17</td>
      <td>Cell-18</td>
      <td>Cell-19</td>
      <td>Cell-20</td>
      <td>Cell-21</td>
    </tr>

    <tr>
      <td class="side_header">Cell-1</td>
      <td>Cell-2</td>
      <td>Cell-3</td>
      <td>Cell-4</td>
      <td>Cell-5</td>
    </tr>

    <tr>
      <td class="side_header">Cell-7</td>
      <td>Cell-8</td>
      <td>Cell-9</td>
      <td>Cell-10</td>
      <td>Cell-11</td>
    </tr>

    <tr>
      <td class="side_header">Cell-12</td>
      <td>Cell-13</td>
      <td>Cell-14</td>
      <td>Cell-15</td>
      <td>Cell-16</td>
    </tr>

    <tr>
      <td class="side_header">Cell-17</td>
      <td>Cell-18</td>
      <td>Cell-19</td>
      <td>Cell-20</td>
      <td>Cell-21</td>
    </tr>
  </table>
</div>

user_142252990

This solution is a bit complicated maybe, and needs some refinement, but it works. It uses the css position: fixed to fix the header row. This creates some problems though, that can be overcome with javascript (I used jQuery).

One problem is to get the header row as wide as the other rows since position:fixed messes up these width and needs help by setting both the tr and the cell width programatically.

Since you will probably want the header row to scroll left and right, we attach a scroll eventListener and move the header row left or right according to the scroll position of the table.

Hope this works out for you!

You could also check for plugins. This one seems to be able to help.

Btw: you have two opening <tr> tags starting the header row. You should remove one.

var $ = jQuery;
$(function(){
  //set the width of the header row
    var width = $("tr:nth-child(2)").width();
    $("tr:first-child").width(width );
  //set the width of all cells in the header row
    var cellWidth = $("tr:nth-child(2) td").width();
    $("tr:first-child td, th").width(cellWidth );
    //make sure the table goes down a bit to make sure the headeer doesn't overlap the first row
    var height = $("tr:nth-child(2)").height();
    $('#table-scroll').css("margin-top", height);
  //set table header scroll for if already scrolled when page loads
    setScroll();
  //bind an event listener to the table to detect scroll
    $('#table-scroll').scroll(function() {
        setScroll();
    });
    function setScroll(){
    //get the scroll position and make sure the header goes left or right
        var currentScrollPos = $('#table-scroll').scrollLeft();
        $("tr:first-child").css("left", - currentScrollPos);
    }
});
body{
        margin: 0;
    }
    
table {
            border: 1px solid white;
            text-align: center;
            padding: 6px;
            background: #e1edf9;
        }

        td {
            border: 1px solid white;
            text-align: center;
            padding: 6px;
        }

        td:first-child,
        tr:first-child {
            background-color: #003a6a !important;
            color: white !important;


        }

        .table-scroll {
            position: relative;
            width: 100%;
            z-index: 1;
            margin: auto;
            overflow: auto;
        }

        .table-scroll table {
            width: 100%;
            min-width: 1280px;
            margin: auto;
            border-collapse: separate;
            border-spacing: 0;
            padding:0;
            margin:0;
        }

        .table-wrap {
            position: relative;
        }

        .table-scroll tr:first-child {
            background: #333;
            color: #fff;
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            position:fixed;
            z-index:9999;
        }

        td:first-child {
            //position: -webkit-sticky;
            //position: sticky;
            left: 0;
            z-index: 2;
            background: #ccc;
        }

        .table-scroll tfoot tr {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  background: #666;
  color: #fff;
  z-index:4;
}

  

@media screen and (max-width: 500px){
    
    
    td{
        //margin: 0;
        padding: 6px 0;
    }
    td:first-child {
            position: -webkit-sticky;
            position: sticky;
            left: 0;
            z-index: 2;
            background: #ccc;
            //max-width: 140px;
        }
        
         tr:first-child {
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            z-index: 2;
            background: #ccc;
            position:fixed;
            z-index:1;
        }
        
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="table-scroll" class="table-scroll">
 <table id="main-table" class="main-table">
        <tbody>
            <tr>
                
          <td><b>Headers</b></td>
                <th><b>Header1</b>
                    <input type="checkbox" name="checkbox" value="checkbox">
                </th>
                <th><b>Header2</b>
                    <input type="checkbox" name="checkbox" value="checkbox">
                </th>
                <th><b>Header3</b>
                    <input type="checkbox" name="checkbox" value="checkbox">
                </th>
        <th><b>Header4</b>
                    <input type="checkbox" name="checkbox" value="checkbox">
                </th>
            
      <tr>
                <td>Cell content1</td>
                <td>Cell content2</td>
                <td>Cell content3</td>
                <td>Cell content4</td>
                <td>Cell content5</td>
            </tr>
            <tr>
                <td>Cell content11</td>
                <td>Cell content12</td>
                <td>Cell content13</td>
                <td>Cell content14</td>
                <td>Cell content15</td>
            </tr>
            <tr>
                <td>Cell content21</td>
                <td>Cell content22</td>
                <td>Cell content23</td>
                <td>Cell content24</td>
                <td>Cell content25</td>
            </tr>
            <tr>
                <td>Cell content31</td>
                <td>Cell content32</td>
                <td>Cell content33</td>
                <td>Cell content34</td>
                <td>Cell content35</td>
            </tr>
            <tr>
                <td>Cell content41</td>
                <td>Cell content42</td>
                <td>Cell content43</td>
                <td>Cell content44</td>
                <td>Cell content45</td>
            </tr>
            <tr>
                <td>Cell content51</td>
                <td>Cell content52</td>
                <td>Cell content53</td>
                <td>Cell content54</td>
                <td>Cell content55</td>
            </tr>
            <tr>
                <td>Cell content61</td>
                <td>Cell content62</td>
                <td>Cell content63</td>
                <td>Cell content64</td>
                <td>Cell content65</td>
            </tr>
            <tr>
                <td>Cell content1</td>
                <td>Cell content2</td>
                <td>Cell content3</td>
                <td>Cell content4</td>
                <td>Cell content5</td>
            </tr>
            <tr>
                <td>Cell content11</td>
                <td>Cell content12</td>
                <td>Cell content13</td>
                <td>Cell content14</td>
                <td>Cell content15</td>
            </tr>
            <tr>
                <td>Cell content21</td>
                <td>Cell content22</td>
                <td>Cell content23</td>
                <td>Cell content24</td>
                <td>Cell content25</td>
            </tr>
            <tr>
                <td>Cell content31</td>
                <td>Cell content32</td>
                <td>Cell content33</td>
                <td>Cell content34</td>
                <td>Cell content35</td>
            </tr>
            <tr>
                <td>Cell content41</td>
                <td>Cell content42</td>
                <td>Cell content43</td>
                <td>Cell content44</td>
                <td>Cell content45</td>
            </tr>
            <tr>
                <td>Cell content51</td>
                <td>Cell content52</td>
                <td>Cell content53</td>
                <td>Cell content54</td>
                <td>Cell content55</td>
            </tr>
            <tr>
                <td>Cell content61</td>
                <td>Cell content62</td>
                <td>Cell content63</td>
                <td>Cell content64</td>
                <td>Cell content65</td>
            </tr>
            <tr>
                <td>Cell content71</td>
                <td>Cell content72</td>
                <td>Cell content73</td>
                <td>Cell content74</td>
                <td>Cell content75</td>
            </tr>
            <tr>
                <td>Cell content81</td>
                <td>Cell content82</td>
                <td>Cell content83</td>
                <td>Cell content84</td>
                <td>Cell content85</td>
            </tr>
            <tr>
                <td>Cell content91</td>
                <td>Cell content92</td>
                <td>Cell content93</td>
                <td>Cell content94</td>
                <td>Cell content95</td>
            </tr>
            <tr>
                <td>Cell content101</td>
                <td>Cell content102</td>
                <td>Cell content103</td>
                <td>Cell content104</td>
                <td>Cell content105</td>
            </tr>
        </tbody>
    </table>
</div>

user_22884760 

.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
<nav class="sticky">Placeholder text<!-- Anything in here will stick and stay on-screen --></nav>
<p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p><p>Dummy text to enable scrolling...</p>

user_155945930
Related