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

Question

我有以下物化表:

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

感谢您的帮助!

Answer 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/