Question

我正在桌上尝试实现垂直和水平滚动，但是没有找到任何解决方案。有人可以帮我解决这个问题。任何示例或代码片段都将不胜感激

谢谢

Answer 1

我不确定是否需要此功能，但是可以将表包装在wrapper元素中，并将overflow: scroll设置为包装器。

    .wrapper {
        height: 200px;
        position: relative;
        overflow-y: scroll;
    }


    table td {
        border: 1px solid #000;
    }

    table thead th {
        position: sticky;
        top: 0;
        background: #fff;
        padding-bottom: 30px;
    }

    table tfoot td {
        background: #fff;
        border: none;
        position: sticky;
        bottom: 0;
        padding-top: 30px;
    }

<div class="wrapper">

          <table>
            
            <thead>
            <tr>
              <th>head</th>
              <th>head</th>
              <th>head</th>
              <th>head</th>
              <th>head</th>
              <th>head</th>
              <th>head</th>
              <th>head</th>
              <th>head</th>
            </tr>
            </thead>
          
            <tr>
              <td>Data</td>
              <td>Data</td>
              <td>Data</td>
              <td>Data</td>
              <td>Data</td>
              <td>Data</td>
              <td>Data</td>
              <td>Data</td>
              <td>Data</td>
            </tr>
            
            <tr>
              <td>Data</td>
              <td>Data</td>
              <td>Data</td>
              <td>Data</td>
              <td>Data</td>
              <td>Data</td>
              <td>Data</td>
              <td>Data</td>
              <td>Data</td>
            </tr>
            
            <tr>
              <td>Data</td>
              <td>Data</td>
              <td>Data</td>
              <td>Data</td>
              <td>Data</td>
              <td>Data</td>
              <td>Data</td>
              <td>Data</td>
              <td>Data</td>
            </tr>
            
            <tr>
              <td>Data</td>
              <td>Data</td>
              <td>Data</td>
              <td>Data</td>
              <td>Data</td>
              <td>Data</td>
              <td>Data</td>
              <td>Data</td>
              <td>Data</td>
            </tr>
            
            <tr>
              <td>Data</td>
              <td>Data</td>
              <td>Data</td>
              <td>Data</td>
              <td>Data</td>
              <td>Data</td>
              <td>Data</td>
              <td>Data</td>
              <td>Data</td>
            </tr>
            
            <tr>
              <td>Data</td>
              <td>Data</td>
              <td>Data</td>
              <td>Data</td>
              <td>Data</td>
              <td>Data</td>
              <td>Data</td>
              <td>Data</td>
              <td>Data</td>
            </tr>
            
            <tr>
              <td>Data</td>
              <td>Data</td>
              <td>Data</td>
              <td>Data</td>
              <td>Data</td>
              <td>Data</td>
              <td>Data</td>
              <td>Data</td>
              <td>Data</td>
            </tr>
            
            <tr>
              <td>Data</td>
              <td>Data</td>
              <td>Data</td>
              <td>Data</td>
              <td>Data</td>
              <td>Data</td>
              <td>Data</td>
              <td>Data</td>
              <td>Data</td>
            </tr>
            
            <tfoot>
            <tr>
              <td>foot</td>
              <td>foot</td>
              <td>foot</td>
              <td>foot</td>
              <td>foot</td>
              <td>foot</td>
              <td>foot</td>
              <td>foot</td>
              <td>foot</td>
            </tr>
            </tfoot>
          </table>

        </div>

编辑1：添加了thead和tfoot并进行了修复。

编辑2：为thead和tfoot添加了填充。

编辑3：使表格只能垂直滚动。

具有固定页脚和页眉的Bootstrap水平和Veritcal滚动

1 个答案: