css - 实现固定页眉和滚动,页脚和移动问题
问题描述
我有以下具体化表:
<div class="row">
<div class="col s12 m12 l12">
<div id="table" class="card card card-default scrollspy">
<div class="card-content material-table ">
<h4 class="card-title">Users Live Results</h4>
<div class="row">
<div class="col s12"></div>
<div class="col s12">
<table class="responsive-table striped">
<thead>
<tr>
<th style="text-align:left;">User</th>
<th style="text-align:right;">RM Deposits</th>
<th style="text-align:right;">RM+RB GGR</th>
<th style="text-align:right;">RM Win</th>
<th style="text-align:right;">RB Win</th>
<th style="text-align:right;">PB Win</th>
<th style="text-align:right;">RM&RB Balance</th>
<th style="text-align:right;">Bo Deposits</th>
<th style="text-align:right;">Withdrawals</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left;">Moha</td>
<td style="text-align:right;">140</td>
<td style="text-align:right;">140</td>
<td style="text-align:right;">140</td>
<td style="text-align:right;">0</td>
<td style="text-align:right;">0</td>
<td style="text-align:right;">140</td>
<td style="text-align:right;">0</td>
<td style="text-align:right;">0</td>
</tr>
<tr>
<td style="text-align:left;">handx</td>
<td style="text-align:right;">0</td>
<td style="text-align:right;">99</td>
<td style="text-align:right;">0</td>
<td style="text-align:right;">99</td>
<td style="text-align:right;">151</td>
<td style="text-align:right;">0</td>
<td style="text-align:right;">250</td>
<td style="text-align:right;">0</td>
</tr>
<tr>
<td style="text-align:left;">Arff</td>
<td style="text-align:right;">0</td>
<td style="text-align:right;">19</td>
<td style="text-align:right;">19</td>
<td style="text-align:right;">0</td>
<td style="text-align:right;">106</td>
<td style="text-align:right;">13</td>
<td style="text-align:right;">0</td>
<td style="text-align:right;">0</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td style="text-align:right;">140</td>
<td style="text-align:right;">260</td>
<td style="text-align:right;">161</td>
<td style="text-align:right;">99</td>
<td style="text-align:right;">257</td>
<td style="text-align:right;"></td>
<td style="text-align:right;">250</td>
<td style="text-align:right;">0</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
我使用 CSS 固定标题并使用以下 css 滚动包含大量数据的表:
table {
font-size: 12px;
}
tbody {
display:block;
height:200px;
overflow:auto;
}
thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;
}
thead {
width: calc( 100% - 1em )
}
table {
width:100%;
}
它正在工作,但表格的页脚位于滚动部分之外(偏移)
根据此屏幕截图:
最后,在小型设备上,滚动根本不起作用,所以我应该排除较小设备的 CSS,但我没有找到任何解决方案。
谢谢你的帮助 !
解决方案
表格中有太多的 CSS 偏移是那里的自然 CSS。您可以向 td 标记添加填充以设置您希望它的间距。
您可以使用所需的不同高度(表格或内容设置为父容器的任何高度和相同的高度,以确保它滚动)。
table {
font-size: 12px;
width: 70%;
height: 500px;
}
tbody {
overflow:auto;
}
thead, tbody tr {
table-layout:fixed;
}
thead {
width: calc( 100% - 1em )
}
.SetContainer{
height: 200px;
overflow: auto;
}
推荐阅读
- angular - 构建表单时控件和 AbstractControls 出错
- java - ClassNotFoundException: org.springframework.kafka.listener.config.ContainerProperties 尝试升级 Spring Boot 版本时
- javascript - p5.js - 无法在程序运行时的随机点读取我的更新函数
- c# - “ConfigurationStoreOptions”不包含“UseSqlServer”的定义
- c++ - 如何为 SIFT 关键点 OpenCV 获得正确的 Octave
- swift - 在 selectedSegment SwiftUi 中显示 mapType
- r - R中两个随机变量的乘积,使用discreteRV包
- python - Python从文件文本制作嵌套列表
- linux - 如何从父进程的cgroup中分离子进程?
- android - AR Core 虚拟场景未在模拟器中显示