实现固定页眉和滚动，页脚和移动问题

Posted 2023-03-05

【中文标题】实现固定页眉和滚动，页脚和移动问题

【英文标题】：Materialize fixed header and scroll, issue with footer and mobile

【发布时间】：2019-12-18 10:16:01

【问题描述】：

我有以下具体化表：

 <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，但我没有找到任何解决方案。

感谢您的帮助！

【参考方案1】：

表格中的 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;

https://jsfiddle.net/86rnu03L/1/

【讨论】：

使用这个提议的 CSS，我失去了我拥有的滚动和高度功能，我需要表格有一个固定的标题并且可以滚动