我试图获取tbody的滚动但是没有运气。
如果我将显示块放到thead和tbody上，那么我就可以实现滚动到tbody但是然后对齐thead和tbody会失真。
<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>
我把它放在小提琴下面。请帮助
答案 0 :(得分：2)
您可以看到以下代码。您必须在我已在代码snipeet中添加的tbody和tbody添加css，并从表.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>@EnableAsync
@EnableCaching
@EnableSwagger2
@SpringBootApplication
open class Application
fun main(args: Array<String>) {
SpringApplication.run(Application::class.java)
}