1

I want to make my html table scrollable by fixing first row and column

I have tried various answers in below mentioned stackoverflow questions but none of them gives correct results or they change my original css design

Freeze first row and first column of table

How can I lock the first row and first column of a table when scrolling, possibly using JavaScript and CSS?

How can I acheive this by maintaing my original css design of table? I am new to css so I am unable to do this.

My HTML/CSS code:

html {
  line-height: 1.5;
  font-family: Lato, sans-serif;
  font-weight: normal;
  font-size: 14px;
  color: #212121;
}

body {
  background: #fafafa;
  margin: 0px;
}

html,
body,
{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.container {
  max-width: 1280px;
  width: 100%;
  position: relative;
  margin: 0 auto;
}

.checkBox {
  width: 100%;
  margin: 12px 0px;
  border: solid 1px #dcdcdc;
  border-radius: 4px;
}

.checkBox thead tr {
  background-color: #ddd;
}

.checkBox thead tr th {
  text-transform: uppercase;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 1px;
  text-align: left;
  color: #7a7a7a;
}

.checkBox tbody tr th {
  text-align: left;
  padding: 4px 12px;
}

.checkBox tbody tr {
  background: #fff;
}

.checkBox tbody tr:nth-child(even) {
  background: #f6f6f6;
}

.checkBox tbody tr td {
  padding: 0 8px;
}
<!DOCTYPE html>
<html>

<head>
  <title>sample</title>
  <meta charset="utf-8" http-equiv="refresh" content="300">
  <link href="https://fonts.googleapis.com/css?family=Lato&display=block" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
  <div class="container">
    <table class="checkBox">
      <thead>
        <tr>
          <th>Name</th>
          <th>user1</th>
          <th>user2</th>
          <th>user3</th>
          <th>user4</th>
          <th>user5</th>
          <th>user6</th>
          <th>user7</th>
          <th>user8</th>
          <th>user9</th>
          <th>user10</th>
          <th>user11</th>
          <th>user12</th>
          <th>user13</th>
        </tr>
      </thead>
      <tbody>
        <tr id='row1'>
          <th span='col'>row1</th>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row2'>
          <th span='col'>row2</th>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row3'>
          <th span='col'>row3</th>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row4'>
          <th span='col'>row4</th>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row5'>
          <th span='col'>row5</th>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row6'>
          <th span='col'>row6</th>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row7'>
          <th span='col'>row7</th>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row8'>
          <th span='col'>row8</th>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row9'>
          <th span='col'>row9</th>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row10'>
          <th span='col'>row10</th>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row11'>
          <th span='col'>row11</th>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row12'>
          <th span='col'>row12</th>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row13'>
          <th span='col'>row13</th>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row14'>
          <th span='col'>row14</th>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row15'>
          <th span='col'>row15</th>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row16'>
          <th span='col'>row16</th>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row17'>
          <th span='col'>row17</th>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row18'>
          <th span='col'>row18</th>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row19'>
          <th span='col'>row19</th>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row20'>
          <th span='col'>row20</th>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row21'>
          <th span='col'>row21</th>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row22'>
          <th span='col'>row22</th>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row23'>
          <th span='col'>row23</th>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id="row24">
          <th span='col'>row24</th>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row25'>
          <th span='col'>row25</th>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row26'>
          <th span='col'>row26</th>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row27'>
          <th span='col'>row27</th>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>
god speed
  • 13
  • 3

1 Answers1

0

You can do something like this(View in full screen for good visualization):

$(document).ready(function() {
  $('tbody').scroll(function(e) { //detect a scroll event on the tbody   
    $('thead').css("left", -$("tbody").scrollLeft()); //fix the thead relative to the body scrolling
    $('thead th:nth-child(1)').css("left", $("tbody").scrollLeft()); //fix the first cell of the header
    $('tbody td:nth-child(1)').css("left", $("tbody").scrollLeft()); //fix the first column of tdbody
  });
});
table {
  position: relative;
  width: 900px;
  background-color: #aaa;
  overflow: hidden;
  border-collapse: collapse;
}


/*thead*/

thead {
  position: relative;
  display: block;
  width: 900px;
  overflow: visible;
}

thead th {
  background-color: #99a;
  min-width: 120px;
  height: 32px;
  border: 1px solid #222;
}

thead th:nth-child(1) {
  /*first cell in the header*/
  position: relative;
  display: block;
  /*seperates the first cell in the header from the header*/
  background-color: #88b;
}


/*tbody*/

tbody {
  position: relative;
  display: block;
  width: 900px;
  height: 239px;
  overflow: scroll;
}

tbody td {
  background-color: #bbc;
  min-width: 120px;
  border: 1px solid #222;
}

tbody tr td:nth-child(1) {
  position: relative;
  display: block;
  height: 40px;
  background-color: #99a;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<head>
  <title>sample</title>
  <meta charset="utf-8" http-equiv="refresh" content="300">
  <link href="https://fonts.googleapis.com/css?family=Lato&display=block" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
  <div class="container">
    <table class="checkBox">
      <thead>
        <tr>

          <th>Name</th>
          <th>user1</th>
          <th>user2</th>
          <th>user3</th>
          <th>user4</th>
          <th>user5</th>
          <th>user6</th>
          <th>user7</th>
          <th>user8</th>
          <th>user9</th>
          <th>user10</th>
          <th>user11</th>
          <th>user12</th>
          <th>user13</th>
        </tr>
      </thead>
      <tbody>
        <tr id='row1'>
          <td>row1</td>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row2'>
          <td>row2</td>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row3'>
          <td>row3</td>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row4'>
          <td>row4</td>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row5'>
          <td>row5</td>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row6'>
          <td>row6</td>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row7'>
          <td>row7</td>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row8'>
          <td>row8</td>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row9'>
          <td>row9</td>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>
        <tr id='row10'>
          <td>row10</td>
          <td id='user1'></td>
          <td id='user2'></td>
          <td id='user3'></td>
          <td id='user4'></td>
          <td id='user5'></td>
          <td id='user6'></td>
          <td id='user7'></td>
          <td id='user8'></td>
          <td id='user9'></td>
          <td id='user10'></td>
          <td id='user11'></td>
          <td id='user12'></td>
          <td id='user13'></td>
        </tr>

      </tbody>
    </table>
  </div>
</body>
Manjuboyz
  • 6,978
  • 3
  • 21
  • 43
  • Thank you @Manjuboyz. I want "Name" header also in first fixed column but it is in second column. Also how to make this fit to browser window? – god speed Apr 12 '20 at 08:28
  • Then it's 2 columns right? it won't be one column? to fit to browser window allow width to body. – Manjuboyz Apr 12 '20 at 08:31
  • so you need Name to sit on top of row1, row2 etc..? if so I updated my answer now. – Manjuboyz Apr 12 '20 at 08:32
  • yes I need Name to be on top of row1, row 2 where there is empty space now, to fit to browser I need this right `table{width: body}` – god speed Apr 12 '20 at 08:34
  • I am setting `table{width:100%}` but it is not working. Also in horizantal scroll first column is not fixed – god speed Apr 12 '20 at 08:43
  • if you put 100% then you won't see horizontal scroll unless you have more column's in the table, I have made changes to `900px` so you have to change those css for you to work. Check my code you can see I have given width as 900px, you can give there 100%, but you may not see scroll since you have given 100%, hope you got what I am saying. – Manjuboyz Apr 12 '20 at 08:47