Akki619
Reputation: 2432
Scroll for tbody
I am trying to get the scroll for tbody but to no luck.
If I put display block to thead and tbody then I am able to achieve the scroll to tbody but then alignment of thead and tbody get's distorted.
<table style="width:100%">
<thead style="background-color: #d9edf7;">
<tr>
<th class="info">Line#</th>
<th class="info">Product</th>
<th class="info" style="display:{!if(isLApprovedRC,'none','')};">Last Approved <br>MRC</th>
<th class="info" style="display:{!if(isLApprovedNRC,'none','')};">Last Approved <br>NRC</th>
<th class="info">Approved MRC</th>
<th class="info">Approved NRC</th>
<th class="info" style="display:{!if(UsageVisibleUI,'none','')}">Usage Charge</th>
<th class="info" style="display:{!if(isVisible1,'none','')}">Approved Burst <br>Rate</th>
<th class="info" style="display:{!if(isVisible1,'none','')}">Approved China <br>Burst Rate</th>
<th class="info" style="display:{!if(IsAccessible,'','none')}">Cost MRC</th>
<th class="info" style="display:{!if(IsAccessible,'','none')}">Cost NRC</th>
<th class="info" style="display:{!if(IsAccessible,'','none')}">Margin(%)</th>
<th> </th>
</tr>
</thead>
<tbody style="height: 450px;overflow: auto;">
<tr>
<td class="info">1</td>
<td class="info" style="word-wrap:break-word;">Product Informa</td>
<td style="display:{!if(isLApprovedRC,'none','')}"> 100.2</td>
<td style="display:{!if(isLApprovedNRC,'none','')}">100.2</td>
<td>
100.2
</td>
<td>
100.2
</td>
<td style="display:{!if(UsageVisibleUI,'none','')}">100.2
</td>
<td style="display:{!if(isVisible1,'none','')}">
100.2
</td>
<td style="display:{!if(isVisible1,'none','')}">
100.2
</td>
<td style="display:{!if(IsAccessible,'','none')}">
100.2
</td>
<td style="display:{!if(IsAccessible,'','none')}">
100.2
</td>
<td style="display:{!if(IsAccessible,'','none')}">100.2</td>
<td></td>
</tr>
</tbody>
</table>I have put this in below fiddle. Kindly help
Upvotes: 0
Views: 217
Answers (1)
Bharat
Reputation: 2464
You can see below code. You have to add css on tr and tbody which i have added in code snipeet and remove inline style from table tbody
.a th, td{
padding: 8px;
border: 1px solid gray;
}
.a thead th, .a tbody tr{ display:table; width:100%}
tr {
width: 100%;
display: inline-table;
table-layout: fixed;
}
tbody{
overflow-y: scroll;
height: 200px; /* <---- Select the height of the body */
width: 100%;
position: absolute;
}<table style="width:100%">
<thead style="background-color: #d9edf7;">
<tr>
<th class="info">Line#</th>
<th class="info">Product</th>
<th class="info" style="display:{!if(isLApprovedRC,'none','')};">Last Approved <br>MRC</th>
<th class="info" style="display:{!if(isLApprovedNRC,'none','')};">Last Approved <br>NRC</th>
<th class="info">Approved MRC</th>
<th class="info">Approved NRC</th>
<th class="info" style="display:{!if(UsageVisibleUI,'none','')}">Usage Charge</th>
<th class="info" style="display:{!if(isVisible1,'none','')}">Approved Burst <br>Rate</th>
<th class="info" style="display:{!if(isVisible1,'none','')}">Approved China <br>Burst Rate</th>
<th class="info" style="display:{!if(IsAccessible,'','none')}">Cost MRC</th>
<th class="info" style="display:{!if(IsAccessible,'','none')}">Cost NRC</th>
<th class="info" style="display:{!if(IsAccessible,'','none')}">Margin(%)</th>
<th> </th>
</tr>
</thead>
<tbody style="">
<tr>
<td class="info">1</td>
<td class="info" style="word-wrap:break-word;">Product Informa</td>
<td style="display:{!if(isLApprovedRC,'none','')}"> 100.2</td>
<td style="display:{!if(isLApprovedNRC,'none','')}">100.2</td>
<td>
100.2
</td>
<td>
100.2
</td>
<td style="display:{!if(UsageVisibleUI,'none','')}">100.2
</td>
<td style="display:{!if(isVisible1,'none','')}">
100.2
</td>
<td style="display:{!if(isVisible1,'none','')}">
100.2
</td>
<td style="display:{!if(IsAccessible,'','none')}">
100.2
</td>
<td style="display:{!if(IsAccessible,'','none')}">
100.2
</td>
<td style="display:{!if(IsAccessible,'','none')}">100.2</td>
<td></td>
</tr>
<tr>
<td class="info">1</td>
<td class="info" style="word-wrap:break-word;">Product Informa</td>
<td style="display:{!if(isLApprovedRC,'none','')}"> 100.2</td>
<td style="display:{!if(isLApprovedNRC,'none','')}">100.2</td>
<td>
100.2
</td>
<td>
100.2
</td>
<td style="display:{!if(UsageVisibleUI,'none','')}">100.2
</td>
<td style="display:{!if(isVisible1,'none','')}">
100.2
</td>
<td style="display:{!if(isVisible1,'none','')}">
100.2
</td>
<td style="display:{!if(IsAccessible,'','none')}">
100.2
</td>
<td style="display:{!if(IsAccessible,'','none')}">
100.2
</td>
<td style="display:{!if(IsAccessible,'','none')}">100.2</td>
<td></td>
</tr>
<tr>
<td class="info">1</td>
<td class="info" style="word-wrap:break-word;">Product Informa</td>
<td style="display:{!if(isLApprovedRC,'none','')}"> 100.2</td>
<td style="display:{!if(isLApprovedNRC,'none','')}">100.2</td>
<td>
100.2
</td>
<td>
100.2
</td>
<td style="display:{!if(UsageVisibleUI,'none','')}">100.2
</td>
<td style="display:{!if(isVisible1,'none','')}">
100.2
</td>
<td style="display:{!if(isVisible1,'none','')}">
100.2
</td>
<td style="display:{!if(IsAccessible,'','none')}">
100.2
</td>
<td style="display:{!if(IsAccessible,'','none')}">
100.2
</td>
<td style="display:{!if(IsAccessible,'','none')}">100.2</td>
<td></td>
</tr>
<tr>
<td class="info">1</td>
<td class="info" style="word-wrap:break-word;">Product Informa</td>
<td style="display:{!if(isLApprovedRC,'none','')}"> 100.2</td>
<td style="display:{!if(isLApprovedNRC,'none','')}">100.2</td>
<td>
100.2
</td>
<td>
100.2
</td>
<td style="display:{!if(UsageVisibleUI,'none','')}">100.2
</td>
<td style="display:{!if(isVisible1,'none','')}">
100.2
</td>
<td style="display:{!if(isVisible1,'none','')}">
100.2
</td>
<td style="display:{!if(IsAccessible,'','none')}">
100.2
</td>
<td style="display:{!if(IsAccessible,'','none')}">
100.2
</td>
<td style="display:{!if(IsAccessible,'','none')}">100.2</td>
<td></td>
</tr>
<tr>
<td class="info">1</td>
<td class="info" style="word-wrap:break-word;">Product Informa</td>
<td style="display:{!if(isLApprovedRC,'none','')}"> 100.2</td>
<td style="display:{!if(isLApprovedNRC,'none','')}">100.2</td>
<td>
100.2
</td>
<td>
100.2
</td>
<td style="display:{!if(UsageVisibleUI,'none','')}">100.2
</td>
<td style="display:{!if(isVisible1,'none','')}">
100.2
</td>
<td style="display:{!if(isVisible1,'none','')}">
100.2
</td>
<td style="display:{!if(IsAccessible,'','none')}">
100.2
</td>
<td style="display:{!if(IsAccessible,'','none')}">
100.2
</td>
<td style="display:{!if(IsAccessible,'','none')}">100.2</td>
<td></td>
</tr>
<tr>
<td class="info">1</td>
<td class="info" style="word-wrap:break-word;">Product Informa</td>
<td style="display:{!if(isLApprovedRC,'none','')}"> 100.2</td>
<td style="display:{!if(isLApprovedNRC,'none','')}">100.2</td>
<td>
100.2
</td>
<td>
100.2
</td>
<td style="display:{!if(UsageVisibleUI,'none','')}">100.2
</td>
<td style="display:{!if(isVisible1,'none','')}">
100.2
</td>
<td style="display:{!if(isVisible1,'none','')}">
100.2
</td>
<td style="display:{!if(IsAccessible,'','none')}">
100.2
</td>
<td style="display:{!if(IsAccessible,'','none')}">
100.2
</td>
<td style="display:{!if(IsAccessible,'','none')}">100.2</td>
<td></td>
</tr>
<tr>
<td class="info">1</td>
<td class="info" style="word-wrap:break-word;">Product Informa</td>
<td style="display:{!if(isLApprovedRC,'none','')}"> 100.2</td>
<td style="display:{!if(isLApprovedNRC,'none','')}">100.2</td>
<td>
100.2
</td>
<td>
100.2
</td>
<td style="display:{!if(UsageVisibleUI,'none','')}">100.2
</td>
<td style="display:{!if(isVisible1,'none','')}">
100.2
</td>
<td style="display:{!if(isVisible1,'none','')}">
100.2
</td>
<td style="display:{!if(IsAccessible,'','none')}">
100.2
</td>
<td style="display:{!if(IsAccessible,'','none')}">
100.2
</td>
<td style="display:{!if(IsAccessible,'','none')}">100.2</td>
<td></td>
</tr>
<tr>
<td class="info">1</td>
<td class="info" style="word-wrap:break-word;">Product Informa</td>
<td style="display:{!if(isLApprovedRC,'none','')}"> 100.2</td>
<td style="display:{!if(isLApprovedNRC,'none','')}">100.2</td>
<td>
100.2
</td>
<td>
100.2
</td>
<td style="display:{!if(UsageVisibleUI,'none','')}">100.2
</td>
<td style="display:{!if(isVisible1,'none','')}">
100.2
</td>
<td style="display:{!if(isVisible1,'none','')}">
100.2
</td>
<td style="display:{!if(IsAccessible,'','none')}">
100.2
</td>
<td style="display:{!if(IsAccessible,'','none')}">
100.2
</td>
<td style="display:{!if(IsAccessible,'','none')}">100.2</td>
<td></td>
</tr>
<tr>
<td class="info">1</td>
<td class="info" style="word-wrap:break-word;">Product Informa</td>
<td style="display:{!if(isLApprovedRC,'none','')}"> 100.2</td>
<td style="display:{!if(isLApprovedNRC,'none','')}">100.2</td>
<td>
100.2
</td>
<td>
100.2
</td>
<td style="display:{!if(UsageVisibleUI,'none','')}">100.2
</td>
<td style="display:{!if(isVisible1,'none','')}">
100.2
</td>
<td style="display:{!if(isVisible1,'none','')}">
100.2
</td>
<td style="display:{!if(IsAccessible,'','none')}">
100.2
</td>
<td style="display:{!if(IsAccessible,'','none')}">
100.2
</td>
<td style="display:{!if(IsAccessible,'','none')}">100.2</td>
<td></td>
</tr>
<tr>
<td class="info">1</td>
<td class="info" style="word-wrap:break-word;">Product Informa</td>
<td style="display:{!if(isLApprovedRC,'none','')}"> 100.2</td>
<td style="display:{!if(isLApprovedNRC,'none','')}">100.2</td>
<td>
100.2
</td>
<td>
100.2
</td>
<td style="display:{!if(UsageVisibleUI,'none','')}">100.2
</td>
<td style="display:{!if(isVisible1,'none','')}">
100.2
</td>
<td style="display:{!if(isVisible1,'none','')}">
100.2
</td>
<td style="display:{!if(IsAccessible,'','none')}">
100.2
</td>
<td style="display:{!if(IsAccessible,'','none')}">
100.2
</td>
<td style="display:{!if(IsAccessible,'','none')}">100.2</td>
<td></td>
</tr>
<tr>
<td class="info">1</td>
<td class="info" style="word-wrap:break-word;">Product Informa</td>
<td style="display:{!if(isLApprovedRC,'none','')}"> 100.2</td>
<td style="display:{!if(isLApprovedNRC,'none','')}">100.2</td>
<td>
100.2
</td>
<td>
100.2
</td>
<td style="display:{!if(UsageVisibleUI,'none','')}">100.2
</td>
<td style="display:{!if(isVisible1,'none','')}">
100.2
</td>
<td style="display:{!if(isVisible1,'none','')}">
100.2
</td>
<td style="display:{!if(IsAccessible,'','none')}">
100.2
</td>
<td style="display:{!if(IsAccessible,'','none')}">
100.2
</td>
<td style="display:{!if(IsAccessible,'','none')}">100.2</td>
<td></td>
</tr>
<tr>
<td class="info">1</td>
<td class="info" style="word-wrap:break-word;">Product Informa</td>
<td style="display:{!if(isLApprovedRC,'none','')}"> 100.2</td>
<td style="display:{!if(isLApprovedNRC,'none','')}">100.2</td>
<td>
100.2
</td>
<td>
100.2
</td>
<td style="display:{!if(UsageVisibleUI,'none','')}">100.2
</td>
<td style="display:{!if(isVisible1,'none','')}">
100.2
</td>
<td style="display:{!if(isVisible1,'none','')}">
100.2
</td>
<td style="display:{!if(IsAccessible,'','none')}">
100.2
</td>
<td style="display:{!if(IsAccessible,'','none')}">
100.2
</td>
<td style="display:{!if(IsAccessible,'','none')}">100.2</td>
<td></td>
</tr>
<tr>
<td class="info">1</td>
<td class="info" style="word-wrap:break-word;">Product Informa</td>
<td style="display:{!if(isLApprovedRC,'none','')}"> 100.2</td>
<td style="display:{!if(isLApprovedNRC,'none','')}">100.2</td>
<td>
100.2
</td>
<td>
100.2
</td>
<td style="display:{!if(UsageVisibleUI,'none','')}">100.2
</td>
<td style="display:{!if(isVisible1,'none','')}">
100.2
</td>
<td style="display:{!if(isVisible1,'none','')}">
100.2
</td>
<td style="display:{!if(IsAccessible,'','none')}">
100.2
</td>
<td style="display:{!if(IsAccessible,'','none')}">
100.2
</td>
<td style="display:{!if(IsAccessible,'','none')}">100.2</td>
<td></td>
</tr>
<tr>
<td class="info">1</td>
<td class="info" style="word-wrap:break-word;">Product Informa</td>
<td style="display:{!if(isLApprovedRC,'none','')}"> 100.2</td>
<td style="display:{!if(isLApprovedNRC,'none','')}">100.2</td>
<td>
100.2
</td>
<td>
100.2
</td>
<td style="display:{!if(UsageVisibleUI,'none','')}">100.2
</td>
<td style="display:{!if(isVisible1,'none','')}">
100.2
</td>
<td style="display:{!if(isVisible1,'none','')}">
100.2
</td>
<td style="display:{!if(IsAccessible,'','none')}">
100.2
</td>
<td style="display:{!if(IsAccessible,'','none')}">
100.2
</td>
<td style="display:{!if(IsAccessible,'','none')}">100.2</td>
<td></td>
</tr>
<tr>
<td class="info">1</td>
<td class="info" style="word-wrap:break-word;">Product Informa</td>
<td style="display:{!if(isLApprovedRC,'none','')}"> 100.2</td>
<td style="display:{!if(isLApprovedNRC,'none','')}">100.2</td>
<td>
100.2
</td>
<td>
100.2
</td>
<td style="display:{!if(UsageVisibleUI,'none','')}">100.2
</td>
<td style="display:{!if(isVisible1,'none','')}">
100.2
</td>
<td style="display:{!if(isVisible1,'none','')}">
100.2
</td>
<td style="display:{!if(IsAccessible,'','none')}">
100.2
</td>
<td style="display:{!if(IsAccessible,'','none')}">
100.2
</td>
<td style="display:{!if(IsAccessible,'','none')}">100.2</td>
<td></td>
</tr>
<tr>
<td class="info">1</td>
<td class="info" style="word-wrap:break-word;">Product Informa</td>
<td style="display:{!if(isLApprovedRC,'none','')}"> 100.2</td>
<td style="display:{!if(isLApprovedNRC,'none','')}">100.2</td>
<td>
100.2
</td>
<td>
100.2
</td>
<td style="display:{!if(UsageVisibleUI,'none','')}">100.2
</td>
<td style="display:{!if(isVisible1,'none','')}">
100.2
</td>
<td style="display:{!if(isVisible1,'none','')}">
100.2
</td>
<td style="display:{!if(IsAccessible,'','none')}">
100.2
</td>
<td style="display:{!if(IsAccessible,'','none')}">
100.2
</td>
<td style="display:{!if(IsAccessible,'','none')}">100.2</td>
<td></td>
</tr>
</tbody>
</table>Upvotes: 2
Related Questions
- Make TBODY scrollable in Webkit browsers
- Fix Bootstrap tbody scroll with parent
- How to scroll a specific area within "tbody"
- tbody scroll not working in safari
- How to apply vertical scrollbar for TBODY
- How to apply scrollbar for tbody rightside for dynamic content
- Can we make only one of the multiple tbody section scrollable ? Please suggest
- Tbody Scrollbar Problem
- tbody scrolling left to right but not the thead
- Tbody scrollbar