HTML Table Header with Fixed Position and scroll able table data elements

Question

Main intention of this question is to make table header fixed and when we scroll vertically only elements should scrolled and table header should be on the same position

And I want this to be done without manually fixing the width of table header, As my column header width is dependent on the td elements .I see some questions where solution found using manually fixing the width of the table header.

Can someone help me in approaching this, by using the same CSS class name

Below is the Demo of my table.

Demo Of the Table

CSS I am using for the above table

.wrapper {

overflow : auto;
width: 1350px;
max-height : 250px;
white-space: nowrap;
padding-bottom : 10px;
padding-top : 10px;
}
.professional .title {
    padding-top: 10px;
    backgrounionad: #2980b9;
}
td {
white-space: nowrap;
border-style: solid;
padding: 8px;
border-right-color: #ff0000;
}

th {
position:auto;
text-align: center;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
width : auto;
height : word-spacing;
white-space: nowrap;

}

.table {

width: auto;
max-width: auto;
margin-bottom: 20px;
}

.tableheader {

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font-size: 1.3rem;
border-radius: 5px;
text-transform: capitalize;
position: relative;

padding: 10px 25px 10px 25px;
}

Solution 1

Finally I ended up by fixing the table width manually, But here I made below things to make it work as I wanted.

Initially I manually found the width of maximum cell content. Without Touching the CSS I overridden the width in HTML itself as below.

Since in my real application I am using ng-repeat I dont need to manually add these in each row.

Any Improvement/Suggestions always accepted :)

style="width : 183px !important;"

Working Demo

Note : Please view the demo in enlarged window as below

My Application HTML Using Ng-Repeat

<div>
            <!--, From the local table,-->
            <table class="professional">
                <tbody>
                    <thead>
                        <tr>

                            <th class="tableheader" style="width : 183px !important;">Message ID</th>
                            <th class="tableheader" style="width : 353px !important;">Operation</th>
                            <th class="tableheader" style="width : 88px !important;">Status</th>
                            <th class="tableheader" style="width : 153px !important;">Account Number</th>
                            <th class="tableheader" style="width : 130px !important;">Send Time</th>
                            <th class="tableheader" style="width : 130px !important;">Receive Time</th>
                            <th class="tableheader" style="width : 113px !important;">Send Data</th>
                            <th class="tableheader" style="width : 128px !important;">Receive Data</th>

                        </tr>
                    </thead>
                </tbody>
            </table>
        </div>
        <div class="wrapper">
            <table class="professional">
                <tbody>

                    <tr class="features" ng-repeat="list in mesaages">
                        <td style="width : 183px !important;">{{list._id.$id}}</td>
                        <td style="width : 353px !important;">{{list.OPERATION}}</td>
                        <td style="width : 88px !important;">{{list.STATUS}}</td>
                        <td style="width : 153px !important;">{{list.ACCOUNTNUMBER}}</td>
                        <td style="width : 130px !important;">{{list.SENDTIME.sec * 1000 | date:'yyyy-MM-dd HH:mm:ss'}}</td>
                        <td  style="width : 130px !important;">{{list.RECEIVETIME.sec * 1000 | date:'yyyy-MM-dd HH:mm:ss'}}</td>
                        <td ng-click="showText(list.REQUEST,$index)" style="width : 113px !important;"><a style="cursor: pointer;">Request</a></td>
                        <td ng-click="showText(list.RESPONSE,$index)" style="width : 128px !important;"><a style="cursor: pointer;">Response</a></td>
                    </tr>

                </tbody>

            </table>
        </div>

Solution 2

You can do it this way :

• Put the first line in a <thead></thead> and add the css position:fixed;
• Put the rest of the table in the <tbody></tbody> and add the css top: 3em; position:relative; The value off the top will depend of your font-size.

This will work if you don't have an horizontal scroll.

.wrapper {
    overflow: auto;
    width: 1350px;
    max-height: 250px;
    white-space: nowrap;
    padding-bottom: 10px;
    padding-top: 10px;
}
.professional .title {
    padding-top: 10px;
    background: #2980b9;
}

td {
    white-space: nowrap;
    border-style: solid;
    padding: 8px;
    border-right-color: #ff0000;
}
th {
    position: auto;
    text-align: center;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    width: auto;
    height: word-spacing;
    white-space: nowrap;
}
.table {
    width: auto;
    max-width: auto;
    margin-bottom: 20px;
}
.tableheader {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    font-size: 1.3rem;
    border-radius: 5px;
    text-transform: capitalize;
    position: relative;
    padding: 10px 25px 10px 25px;
}
tbody{
  top:3em;
  position:relative;
}
thead {
  position:fixed;
}

<link rel="stylesheet" href="style.css" />
   <body>
      Scrollable Table
      <div class="wrapper">
      
        <table class="professional">
          <thead>
            <tr>
                  <th class="tableheader">Message ID</th>
                  <th class="tableheader">Operation</th>
                  <th class="tableheader">Status</th>
                  <th class="tableheader">Send Time</th>
                  <th class="tableheader">Receive Time</th>
                  <th class="tableheader">Send Data</th>
                  <th class="tableheader">Receive Data</th>
               </tr>
               </thead>
            <tbody>
            
               <!-- ngRepeat: list in opMessageLogs -->
               <tr class="features ng-scope" ng-repeat="list in opMessageLogs">
                  <td class="ng-binding">58231e66982cf7857fee2cb5</td>
                  <td class="ng-binding">Operation1</td>
                  <td class="ng-binding">SUCCESS</td>
                  <td class="ng-binding">null</td>
                  <td class="ng-binding">2016-11-09 18:32:30</td>
                  <td ng-click="showText(list.REQUEST,$index)">Request</td>
                  <td ng-click="showText(list.RESPONSE,$index)">Response</td>
               </tr>
               <!-- end ngRepeat: list in opMessageLogs -->
               <tr class="features ng-scope" ng-repeat="list in opMessageLogs">
                  <td class="ng-binding">58231e681b58b970137b56aa</td>
                  <td class="ng-binding">Operation2</td>
                  <td class="ng-binding">SUCCESS</td>
                  <td class="ng-binding">2016-11-09 18:32:32</td>
                  <td class="ng-binding">2016-11-09 18:32:32</td>
                  <td ng-click="showText(list.REQUEST,$index)">Request</td>
                  <td ng-click="showText(list.RESPONSE,$index)">Response</td>
               </tr>
               <!-- end ngRepeat: list in opMessageLogs -->
               <tr class="features ng-scope" ng-repeat="list in opMessageLogs">
                  <td class="ng-binding">58231e691b58b970137b56ab</td>
                  <td class="ng-binding">Operation3</td>
                  <td class="ng-binding">SUCCESS</td>
                  <td class="ng-binding">2016-11-09 18:32:33</td>
                  <td class="ng-binding">2016-11-09 18:32:33</td>
                  <td ng-click="showText(list.REQUEST,$index)">Request</td>
                  <td ng-click="showText(list.RESPONSE,$index)">Response</td>
               </tr>
               <tr class="features ng-scope" ng-repeat="list in opMessageLogs">
                  <td class="ng-binding">58231e691b58b970137b56ab</td>
                  <td class="ng-binding">Operation3</td>
                  <td class="ng-binding">SUCCESS</td>
                  <td class="ng-binding">2016-11-09 18:32:33</td>
                  <td class="ng-binding">2016-11-09 18:32:33</td>
                  <td ng-click="showText(list.REQUEST,$index)">Request</td>
                  <td ng-click="showText(list.RESPONSE,$index)">Response</td>
               </tr>
               <tr class="features ng-scope" ng-repeat="list in opMessageLogs">
                  <td class="ng-binding">58231e691b58b970137b56ab</td>
                  <td class="ng-binding">Operation3</td>
                  <td class="ng-binding">SUCCESS</td>
                  <td class="ng-binding">2016-11-09 18:32:33</td>
                  <td class="ng-binding">2016-11-09 18:32:33</td>
                  <td ng-click="showText(list.REQUEST,$index)">Request</td>
                  <td ng-click="showText(list.RESPONSE,$index)">Response</td>
               </tr>
               <tr class="features ng-scope" ng-repeat="list in opMessageLogs">
                  <td class="ng-binding">58231e691b58b970137b56ab</td>
                  <td class="ng-binding">Operation3</td>
                  <td class="ng-binding">SUCCESS</td>
                  <td class="ng-binding">2016-11-09 18:32:33</td>
                  <td class="ng-binding">2016-11-09 18:32:33</td>
                  <td ng-click="showText(list.REQUEST,$index)">Request</td>
                  <td ng-click="showText(list.RESPONSE,$index)">Response</td>
               </tr>
               <tr class="features ng-scope" ng-repeat="list in opMessageLogs">
                  <td class="ng-binding">58231e691b58b970137b56ab</td>
                  <td class="ng-binding">Operation3</td>
                  <td class="ng-binding">SUCCESS</td>
                  <td class="ng-binding">2016-11-09 18:32:33</td>
                  <td class="ng-binding">2016-11-09 18:32:33</td>
                  <td ng-click="showText(list.REQUEST,$index)">Request</td>
                  <td ng-click="showText(list.RESPONSE,$index)">Response</td>
               </tr>
               <tr class="features ng-scope" ng-repeat="list in opMessageLogs">
                  <td class="ng-binding">58231e691b58b970137b56ab</td>
                  <td class="ng-binding">Operation3</td>
                  <td class="ng-binding">SUCCESS</td>
                  <td class="ng-binding">2016-11-09 18:32:33</td>
                  <td class="ng-binding">2016-11-09 18:32:33</td>
                  <td ng-click="showText(list.REQUEST,$index)">Request</td>
                  <td ng-click="showText(list.RESPONSE,$index)">Response</td>
               </tr>
               <tr class="features ng-scope" ng-repeat="list in opMessageLogs">
                  <td class="ng-binding">58231e691b58b970137b56ab</td>
                  <td class="ng-binding">Operation3</td>
                  <td class="ng-binding">SUCCESS</td>
                  <td class="ng-binding">2016-11-09 18:32:33</td>
                  <td class="ng-binding">2016-11-09 18:32:33</td>
                  <td ng-click="showText(list.REQUEST,$index)">Request</td>
                  <td ng-click="showText(list.RESPONSE,$index)">Response</td>
               </tr>
               <tr class="features ng-scope" ng-repeat="list in opMessageLogs">
                  <td class="ng-binding">58231e691b58b970137b56ab</td>
                  <td class="ng-binding">Operation3</td>
                  <td class="ng-binding">SUCCESS</td>
                  <td class="ng-binding">2016-11-09 18:32:33</td>
                  <td class="ng-binding">2016-11-09 18:32:33</td>
                  <td ng-click="showText(list.REQUEST,$index)">Request</td>
                  <td ng-click="showText(list.RESPONSE,$index)">Response</td>
               </tr>
               <tr class="features ng-scope" ng-repeat="list in opMessageLogs">
                  <td class="ng-binding">58231e691b58b970137b56ab</td>
                  <td class="ng-binding">Operation3</td>
                  <td class="ng-binding">SUCCESS</td>
                  <td class="ng-binding">2016-11-09 18:32:33</td>
                  <td class="ng-binding">2016-11-09 18:32:33</td>
                  <td ng-click="showText(list.REQUEST,$index)">Request</td>
                  <td ng-click="showText(list.RESPONSE,$index)">Response</td>
               </tr>
               <!-- end ngRepeat: list in opMessageLogs -->
               <tr class="features ng-scope" ng-repeat="list in opMessageLogs">
                  <td class="ng-binding">58231e6d1b58b970137b56ac</td>
                  <td class="ng-binding">Operation4</td>
                  <td class="ng-binding">SUCCESS</td>
                  <td class="ng-binding">2016-11-09 18:32:33</td>
                  <td class="ng-binding">2016-11-09 18:32:37</td>
                  <td ng-click="showText(list.REQUEST,$index)">Request</td>
                  <td ng-click="showText(list.RESPONSE,$index)">Response</td>
               </tr>
               <!-- end ngRepeat: list in opMessageLogs -->
               <tr class="features ng-scope" ng-repeat="list in opMessageLogs">
                  <td class="ng-binding">58231e721b58b970137b56ad</td>
                  <td class="ng-binding">Operation5</td>
                  <td class="ng-binding">FAILURE</td>
                  <td class="ng-binding">2016-11-09 18:32:37</td>
                  <td class="ng-binding">null</td>
                  <td ng-click="showText(list.REQUEST,$index)">Request</td>
                  <td ng-click="showText(list.RESPONSE,$index)">Response</td>
               </tr>
               <!-- end ngRepeat: list in opMessageLogs -->
               <tr class="features ng-scope" ng-repeat="list in opMessageLogs">
                  <td class="ng-binding">58231e731b58b970137b56ae</td>
                  <td class="ng-binding">Operation6</td>
                  <td class="ng-binding">SUCCESS</td>
                  <td class="ng-binding">2016-11-09 18:32:43</td>
                  <td class="ng-binding">2016-11-09 18:32:43</td>
                  <td ng-click="showText(list.REQUEST,$index)">Request</td>
                  <td ng-click="showText(list.RESPONSE,$index)">Response</td>
               </tr>
               <!-- end ngRepeat: list in opMessageLogs -->
               <tr class="features ng-scope" ng-repeat="list in opMessageLogs">
                  <td class="ng-binding">58231e741b58b970137b56af</td>
                  <td class="ng-binding">Operation7</td>
                  <td class="ng-binding">SUCCESS</td>
                  <td class="ng-binding">2016-11-09 18:32:43</td>
                  <td class="ng-binding">2016-11-09 18:32:44</td>
                  <td ng-click="showText(list.REQUEST,$index)">Request</td>
                  <td ng-click="showText(list.RESPONSE,$index)">Response</td>
               </tr>
               <!-- end ngRepeat: list in opMessageLogs -->
               <tr class="features ng-scope" ng-repeat="list in opMessageLogs">
                  <td class="ng-binding">58231e761b58b970137b56b0</td>
                  <td class="ng-binding">Operation8</td>
                  <td class="ng-binding">SUCCESS</td>
                  <td class="ng-binding">2016-11-09 18:32:46</td>
                  <td class="ng-binding">2016-11-09 18:32:46</td>
                  <td ng-click="showText(list.REQUEST,$index)">Request</td>
                  <td ng-click="showText(list.RESPONSE,$index)">Response</td>
               </tr>
               <!-- end ngRepeat: list in opMessageLogs -->
               <tr class="features ng-scope" ng-repeat="list in opMessageLogs">
                  <td class="ng-binding">58231e771b58b970137b56b1</td>
                  <td class="ng-binding">Operation9</td>
                  <td class="ng-binding">SUCCESS</td>
                  <td class="ng-binding">2016-11-09 18:32:46</td>
                  <td class="ng-binding">2016-11-09 18:32:47</td>
                  <td ng-click="showText(list.REQUEST,$index)">Request</td>
                  <td ng-click="showText(list.RESPONSE,$index)">Response</td>
               </tr>
               <!-- end ngRepeat: list in opMessageLogs -->
               <tr class="features ng-scope" ng-repeat="list in opMessageLogs">
                  <td class="ng-binding">58231e781b58b970137b56b2</td>
                  <td class="ng-binding">Operation10</td>
                  <td class="ng-binding">SUCCESS</td>
                  <td class="ng-binding">2016-11-09 18:32:47</td>
                  <td class="ng-binding">2016-11-09 18:32:48</td>
                  <td ng-click="showText(list.REQUEST,$index)">Request</td>
                  <td ng-click="showText(list.RESPONSE,$index)">Response</td>
               </tr>
               <!-- end ngRepeat: list in opMessageLogs -->
               <tr class="features ng-scope" ng-repeat="list in opMessageLogs">
                  <td class="ng-binding">58231e791b58b970137b56b3</td>
                  <td class="ng-binding">Operation11</td>
                  <td class="ng-binding">SUCCESS</td>
                  <td class="ng-binding">2016-11-09 18:32:48</td>
                  <td class="ng-binding">2016-11-09 18:32:49</td>
                  <td ng-click="showText(list.REQUEST,$index)">Request</td>
                  <td ng-click="showText(list.RESPONSE,$index)">Response</td>
               </tr>
               <!-- end ngRepeat: list in opMessageLogs -->
               <tr class="features ng-scope" ng-repeat="list in opMessageLogs">
                  <td class="ng-binding">58231e8d982cf7857fee2cb9</td>
                  <td class="ng-binding">Operation1</td>
                  <td class="ng-binding">SUCCESS</td>
                  <td class="ng-binding">null</td>
                  <td class="ng-binding">2016-11-09 18:33:09</td>
                  <td ng-click="showText(list.REQUEST,$index)">Request</td>
                  <td ng-click="showText(list.RESPONSE,$index)">Response</td>
               </tr>
               <!-- end ngRepeat: list in opMessageLogs -->
               <tr class="features ng-scope" ng-repeat="list in opMessageLogs">
                  <td class="ng-binding">58231e97a782de0c9ea24979</td>
                  <td class="ng-binding">Operation2</td>
                  <td class="ng-binding">SUCCESS</td>
                  <td class="ng-binding">2016-11-09 18:33:19</td>
                  <td class="ng-binding">2016-11-09 18:33:19</td>
                  <td ng-click="showText(list.REQUEST,$index)">Request</td>
                  <td ng-click="showText(list.RESPONSE,$index)">Response</td>
               </tr>
               <!-- end ngRepeat: list in opMessageLogs -->
            </tbody>
         </table>
      </div>
   </body>

Solution 3

Try this code:

.container{
  width:100%;
  height:150px;
  overflow:auto;
}
td{
border:1px solid;
}
.header{
  width:calc(100% - 17px);
  width:-webkit-calc(100% - 17px);
  width:-moz-calc(100% - 17px);
 height:25px; 
 background:#000;color:#fff;
}

<table class="header">
<tr height="25">
  <td width="50%">header</td>
  <td width="50%">header</td>
  </tr>
</table>
<div class="container">
<table style="width:100%; ">
<tr height="25">
  <td width="50%">body</td>
  <td width="50%">body</td>
  </tr>
  <tr height="25">
  <td width="50%">body</td>
  <td width="50%">body</td>
  </tr>
  <tr height="25">
  <td width="50%">body</td>
  <td width="50%">body</td>
  </tr>
  <tr height="25">
  <td width="50%">body</td>
  <td width="50%">body</td>
  </tr>
  <tr height="25">
  <td width="50%">body</td>
  <td width="50%">body</td>
  </tr>
   <tr height="25">
  <td width="50%">body</td>
  <td width="50%">body</td>
  </tr>
   <tr height="25">
  <td width="50%">body</td>
  <td width="50%">body</td>
  </tr>
   <tr height="25">
  <td width="50%">body</td>
  <td width="50%">body</td>
  </tr>
   <tr height="25">
  <td width="50%">body</td>
  <td width="50%">body</td>
  </tr>
   <tr height="25">
  <td width="50%">body</td>
  <td width="50%">body</td>
  </tr>
</table>
</div>

Solution 4

If all you want is to match your header's width, with the width of your td elements, you can do it using javascript offsetWidth. This will give you the width of td element. So you can use the answers you saw with fixing the width of the table header.

If you don't want to use javascript , maybe this will help you:

    .wrapper {
        display:inline-block;
        position:relative;
    }
    .tableheader{
        display:block;
    }
    .tablebody{
        display:block;
        overflow-y:scroll;
        max-height:80px;
    }
    .ng-binding{
        display:block;
    }

<div class="wrapper">
    <div class="tableheader">
        Message ID
    </div>
    <div class="tablebody">
        <div class="ng-binding">
            58231e66982cf7857fee2cb5
        </div>
        <div class="ng-binding">
            58231e66982cf7857fee2cb5
        </div>
        <div class="ng-binding">
            58231e66982cf7857fee2cb5
        </div>
        <div class="ng-binding">
            58231e66982cf7857fee2cb5
        </div>
        <div class="ng-binding">
            58231e66982cf7857fee2cb5
        </div>
        <div class="ng-binding">
            58231e66982cf7857fee2cb5
        </div>
        <div class="ng-binding">
            58231e66982cf7857fee2cb5
        </div>
        <div class="ng-binding">
            58231e66982cf7857fee2cb5
        </div>
    </div>
</div>
<div class="wrapper">
    <div class="tableheader">
        Operation
    </div>
    <div class="tablebody">
        <div class="ng-binding">
            Operation1
        </div>
        <div class="ng-binding">
            Operation2
        </div>
        <div class="ng-binding">
            Operation3
        </div>
        <div class="ng-binding">
            Operation11
        </div>
        <div class="ng-binding">
            5Operation12
        </div>
        <div class="ng-binding">
            Operation13
        </div>
        <div class="ng-binding">
            Operation14
        </div>
        <div class="ng-binding">
            Operation15
        </div>
    </div>
</div>

View more solutions

Comments

[Mahesh G]

This is not working for me can you please help me in editing my CSS in demo

[Mahesh G]

Actually my table may extend to even right side based on the content size. Is there any way this can be done even for horizontal scrolling

[Mahesh G]

I dont want to have independent scrollbar, Is there anyway I can make only one vertical scroll bar for this.

[Mahesh G]

And I have created new Jsfiddler adding my whole CSS, If you could get time can you please update that CSS , I think its becasue of some other dependency its not working Demo

[levkaster]

There probably exist a way to do this without javascript, but I cannot find it.

[Amaury Hanser]

Well, I don't think it's possible for the horizontal scrolling. If you fix an element in css, it will be fixed both horizontally and vertically. For your actual code : thead { position: fixed; // Fix your thead so it won't move z-index: 40; // This way, your thead will be over your tbody } You should also delete #wrapper { padding-top:10px; }

[Mahesh G]

Thanks for your time I could able to manage by fixing the width manually at the last.

[user1015388]

@Kangouroops, I tried to use the solution above. Seems to be working. But how can we make the data in table scroll down the header, instead of seeing on the top of header when you scroll.

[Amaury Hanser]

@user1015388 Hello, you could simply add a background to the header and be sure to have a higher z-index for the header.