如何设置滚动条的表格正确位置?

Question

我在表格右侧添加滚动条时遇到问题，但我不能谈论实际问题是什么，但我也使用jquery插件table_scroll.js.problem如图所示。谁能帮我？谢谢。

https://i.stack.imgur.com/XqLBD.png

Answer 1

你可以通过使用css来实现它。请参阅我的表格。我在这里使用一些 css 来创建表格正文的滚动条。

.viewTable {
table-layout:fixed;
margin:auto;
}
.thData, .tdData {
padding:8px;
text-align: center;
}
.theadData, tfoot {
background-color: #9ac9fb;
display:table;
width:100%;
}
.table-height .table .tdData {
vertical-align: middle !important; 
}
.viewTable .tbodyData {
max-height:250px;
overflow:auto;
overflow-x:hidden;
display:block;
width:100%;
}
.item-dist .tbodyData {
height:490px;
overflow:auto;
overflow-x:hidden;
width:100%;
}
.tbodyData .trData {
display:table;
width:100%;
table-layout:fixed;
border-bottom: 1px solid #ffffff !important;
}
.table .theadData .thData {
border: none !important;
width: 10% !important;
text-align: center;
padding: 10px;
}

<table align="center" class="table table-hover viewTable">
<thead class="theadData">
<tr class="trData">
<th class="thData">Column 1</th>
<th class="thData">Column 2</th>
<th class="thData">Column 3</th>
<th class="thData">Column 4</th>
</tr>
</thead>

<tbody class="tbodyData">

<tr class="trData">
<td class="tdData">A</td>
<td class="tdData">B</td>
<td class="tdData">C</td>
<td class="tdData">D</td>
</tr>
<tr class="trData">
<td class="tdData">A</td>
<td class="tdData">B</td>
<td class="tdData">C</td>
<td class="tdData">D</td>
</tr>
<tr class="trData">
<td class="tdData">A</td>
<td class="tdData">B</td>
<td class="tdData">C</td>
<td class="tdData">D</td>
</tr>
<tr class="trData">
<td class="tdData">A</td>
<td class="tdData">B</td>
<td class="tdData">C</td>
<td class="tdData">D</td>
</tr>
<tr class="trData">
<td class="tdData">A</td>
<td class="tdData">B</td>
<td class="tdData">C</td>
<td class="tdData">D</td>
</tr>
<tr class="trData">
<td class="tdData">A</td>
<td class="tdData">B</td>
<td class="tdData">C</td>
<td class="tdData">D</td>
</tr>
<tr class="trData">
<td class="tdData">A</td>
<td class="tdData">B</td>
<td class="tdData">C</td>
<td class="tdData">D</td>
</tr>                  <tr class="trData">
<td class="tdData">A</td>
<td class="tdData">B</td>
<td class="tdData">C</td>
<td class="tdData">D</td>
</tr>                  <tr class="trData">
<td class="tdData">A</td>
<td class="tdData">B</td>
<td class="tdData">C</td>
<td class="tdData">D</td>
</tr>                  <tr class="trData">
<td class="tdData">A</td>
<td class="tdData">B</td>
<td class="tdData">C</td>
<td class="tdData">D</td>
</tr>
<tr class="trData">
<td class="tdData">A</td>
<td class="tdData">B</td>
<td class="tdData">C</td>
<td class="tdData">D</td>
</tr>
<tr class="trData">
<td class="tdData">A</td>
<td class="tdData">B</td>
<td class="tdData">C</td>
<td class="tdData">D</td>
</tr>
<tr class="trData">
<td class="tdData">A</td>
<td class="tdData">B</td>
<td class="tdData">C</td>
<td class="tdData">D</td>
</tr>
<tr class="trData">
<td class="tdData">A</td>
<td class="tdData">B</td>
<td class="tdData">C</td>
<td class="tdData">D</td>
</tr>
<tr class="trData">
<td class="tdData">A</td>
<td class="tdData">B</td>
<td class="tdData">C</td>
<td class="tdData">D</td>
</tr>
<tr class="trData">
<td class="tdData">A</td>
<td class="tdData">B</td>
<td class="tdData">C</td>
<td class="tdData">D</td>
</tr>
<tr class="trData">
<td class="tdData">A</td>
<td class="tdData">B</td>
<td class="tdData">C</td>
<td class="tdData">D</td>
</tr>
<tr class="trData">
<td class="tdData">A</td>
<td class="tdData">B</td>
<td class="tdData">C</td>
<td class="tdData">D</td>
</tr>
<tr class="trData">
<td class="tdData">A</td>
<td class="tdData">B</td>
<td class="tdData">C</td>
<td class="tdData">D</td>
</tr>
<tr class="trData">
<td class="tdData">A</td>
<td class="tdData">B</td>
<td class="tdData">C</td>
<td class="tdData">D</td>
</tr>
<tr class="trData">
<td class="tdData">A</td>
<td class="tdData">B</td>
<td class="tdData">C</td>
<td class="tdData">D</td>
</tr>



</tbody>
</table>