html - 如何创建一个没有固定高度的可滚动正文的表格
问题描述
我正在尝试创建一个带有可滚动正文的 html 表格,以便您始终可以看到标题。我希望表格位于 div 内,并且最大高度为 div 高度的 100%。表格项是动态生成的,所以如果项太多,就会得到body上的滚动条。但是如果项目很少,我希望表格缩小而不是使用 div 的全部高度。
我可以将表格的高度设置为 100%,并将 tbody 的显示设置为阻塞,并将其最大高度设置为 100%。这样做的问题是即使没有项目,表格主体仍然使用全高来显示空白表格。
我可以为 tbody 设置一些固定的最大高度,并将表格的高度设置为自动。这样,当项目很少而不是显示空白主体时,表格会缩小。问题是高度不再由 div 控制。
html:
<div>
<table>
<thead>
<tr>
<th > col1</th>
<th> col 2</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
css
tbody{
display: block;
max-height: 100%;
overflow: auto;
}
table{
height: 100%;
border: 1px solid black;
}
div{
height: 300px;
}
解决方案
使用 DataTable 解决这个问题。这是演示:
$(document).ready(function() {
$('#example').DataTable({
"scrollY": 100,
"scrollX": true
});
});
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<table id="example" class="display nowrap" style="width:100%">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Extn.</th>
<th>E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger</td>
<td>Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>5421</td>
<td>t.nixon@datatables.net</td>
</tr>
<tr>
<td>Garrett</td>
<td>Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
<td>8422</td>
<td>g.winters@datatables.net</td>
</tr>
<tr>
<td>Ashton</td>
<td>Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
<td>1562</td>
<td>a.cox@datatables.net</td>
</tr>
<tr>
<td>Cedric</td>
<td>Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
<td>6224</td>
<td>c.kelly@datatables.net</td>
</tr>
<tr>
<td>Airi</td>
<td>Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
<td>5407</td>
<td>a.satou@datatables.net</td>
</tr>
<tr>
<td>Ashton</td>
<td>Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
<td>1562</td>
<td>a.cox@datatables.net</td>
</tr>
<tr>
<td>Cedric</td>
<td>Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
<td>6224</td>
<td>c.kelly@datatables.net</td>
</tr>
<tr>
<td>Airi</td>
<td>Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
<td>5407</td>
<td>a.satou@datatables.net</td>
</tr>
</tbody>
</table>
以下是详细信息:https ://datatables.net/examples/basic_init/scroll_xy.html
推荐阅读
- ios - 我无法理解结果为什么要添加斜线?如何删除它?
- webpack - 如何在 webpack 中导入角度?
- android - 在当前主题中找不到样式“bottomNavigationStyle”
- javascript - 如何在 XMLHttpRequested 字符串上使用 getElementByClassName?
- android - 使用 RetainingDataSourceSupplier 播放动画图像
- cmake - 如何仅使用静态库构建 llvm 工具
- php - JWT 中的注销不起作用
- angularjs - 如何在 ng-click 指令上获取 col 值并与 scope.info 绑定
- java - 可从 PySpark/Python 调用的 Spark (2.3+) Java 函数
- kotlin - Room RxJava - onNext() 在 FlowableSubscriber 中调用一次