3

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;
}
Improve this question
2
  • 2
    This should help if you're open to jquery solutions. codepen.io/jgx/pen/wiIGc Commented Nov 14, 2016 at 19:52
  • Thanks but i tried i need to fix my css to work with jquery. Commented Nov 15, 2016 at 3:15

5 Answers 5

Reset to default
3
+25

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

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
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
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; }
Thanks for your time I could able to manage by fixing the width manually at the last.
@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.
|
2

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>

Improve this answer

Comments

1

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>

Improve this answer

2 Comments

I dont want to have independent scrollbar, Is there anyway I can make only one vertical scroll bar for this.
There probably exist a way to do this without javascript, but I cannot find it.
0

What you could do, is instead of using a table row for the header, create a <div> element and style it to be at the top of the screen

#tableheader {
    position:fixed;
    top:0;
    width:100%;
    z-index:100;
}

Then you could put a table element under it.

<div id="tableheader">
Table title
</div>
<table>
    <tr>
        <td>Data</td>
        <td>More Data</td>
    </tr>
</table>
Improve this answer

1 Comment

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

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

enter image description here

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>
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.