css - Angular ng-table 的水平滚动

Question

不幸的是，我的部分在代码和文本方面都很小，但也许我幻想这就是我所需要的。上下文是我试图为我的表格引入水平滚动，就像我的表格一样，我最多可以生成额外的 15 列。我的代码包含以下内容:

<div class="ng-table">
    <div style="overflow-x:scroll;">
        <table ng-table="resultsTable"
               class="table table-bordered table-striped margin-bottom-10 pointer"
               show-filter="showFilter">
            <tr ng-repeat="entity in $data">
                 ...
            </tr>
        </table>
    </div>

我在网上搜索了一下，发现 style="overflow-x:scroll ，虽然是的，它在底部添加了一个滚动模板，但它似乎根本不起作用。任何原因我忘记了什么？谢谢。

Answer 1

当 block 级容器内的内容大小超过容器的整体大小时，自然应该显示水平滚动。

如你所愿 ng-table可在div内水平滚动元素，设置 div 的宽度包含ng-table还有overflow-x:scroll在 div 上。

    <div style="width:100px;overflow-x:scroll;">
     <table>
      <tr>
       <td>Col 1</td>
       <td>Col 2</td>
       <td>Col 3</td>
       <td>Col 4</td>
       <td>Col 5</td>
       <td>Col 6</td>
      </tr>
     </table>
    </div>