Question

我使用语义ui作为前端框架，我有一个表格，其中有大约10列，但表格宽度只是设置为其容器，而我希望它超过容器并可滚动到右边见其他专栏。

这是代码。

<table class="ui fixed single line celled table yellow very compact striped">
    <thead>
        <tr>
            <th>Date</th>
            <th>Type</th>
            <th>Docno</th>
            <th>Itemno</th>
            <th>Item Part</th>
            <th>Description</th>
            <th>Uom</th>
            <th>Location</th>
            <th>Qty</th>
            <th>Supplier</th>
            <th>Dono</th>
            <th>Prod Loc</th>
            <th>Lotno</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="x in data">
            <td>{{x.in_date}}</td>
            <td>{{x.type}}</td>
            <td>{{x.doc_no}}</td>
            <td>{{x.item_no}}</td>
            <td>{{x.matcode}}</td>
            <td>{{x.descr}}</td>
            <td>{{x.u_measure}}</td>
            <td>{{x.location}}</td>
            <td>{{x.in_qty}}</td>
            <td>{{x.supp_no}}</td>
            <td>{{x.do_no}}</td>
            <td>{{x.org}}</td>
            <td>{{x.lot_no}}</td>
        </tr>
    </tbody>
</table>

如何使表格在其容器上方，需要向右滚动以查看其他列内容。

Answer 1

首先将表格插入容器中。然后在此容器上设置宽度，例如400，并将高度调整为任何值。最重要的是overflow-x：滚动以在其上设置滚动条。

<div id='container' style='height:500px;width:400px;overflow-x:scroll'>
      <table></table> 
</div>

语义UI表格宽度

1 个答案: