Mahesh G
Reputation: 1276
HTML Table Header with Fixed Position and scroll able table data elements
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.
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;
}
Upvotes: 3
Views: 11419
Answers (5)
Inigo Mantoya
Reputation: 671
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>
Upvotes: 0
Samudrala Ramu
Reputation: 2106
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>Upvotes: 2
levkaster
Reputation: 2730
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>Upvotes: 1
Mahesh G
Reputation: 1276
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;"
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>
Upvotes: -2
Amaury Hanser
Reputation: 3456
You can do it this way :
- Put the first line in a
<thead></thead>and add the cssposition:fixed; - Put the rest of the table in the
<tbody></tbody>and add the csstop: 3em; position:relative;The value off thetopwill 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>Upvotes: 3
Related Questions
- How to make fixed header table inside scrollable div?
- css: table scrollable both horizontally and vertically with fixed header
- Scrollable HTML Table with fixed header and fixed column
- Fixed header in table inside scrollable Div
- Scrollable table with fixed header
- Fixed header within table when scrolling the table
- Scrollable Table with fixed headers and fixed first column
- How to make a scrollable table with fixed header
- how to make a table scrollable with fixed header
- How to make scrollable table's header fixed using css fixed position property?