css表格行不超过表格的宽度

Question

我有一个设置为 overflow-y: auto 和 display:block 的表格，但问题是这些行在整个宽度之前不会占用空间 table 。 下面是截图:

代码如下:

<div class="row">
        <div class="col-md-6">
            <table class="table table-hover ">
                <thead>
                    <tr><th style="text-align: center">Excel List</th></tr>
                    <tr>
                        <td>
                            <input type="text" class="form-control" placeholder="Search Excel" ng-keyup="searchExcel()" ng-model="excelSearchTerm">
                        </td>
                    </tr>
                </thead>
                <tbody class="tbody-style excel-list-table">
                    <tr ng-repeat="excel in excelList" ng-if="excelSearchTerm == ''">
                        <td ng-click="ctrlClickExcel($event, excel)" ng-class="{'selected' : excel.selected}">{{excel.dir}}</td>
                    </tr>

                    <tr ng-repeat="excel in excelSearchResults" ng-if="excelSearchTerm != ''">
                        <td ng-click="ctrlClickExcel($event, excel)" ng-class="{'selected' : excel.selected}">{{excel.dir}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
</div>

如果我删除 display: block 那么这是唯一一次行占据整个宽度但它不会再溢出并且将占据全屏而不是 250 像素的高度。

我正在使用 Bootstrap。

编辑: 我设法有一个解决方法。我刚刚为标题添加了另一个表格，另一个表格包含在带有 overflow-y 和显示 block 的 div 中。

Answer 1

在table外加一个DIV然后放overflow

<div style="overflow-y: auto;display:block;height:250px">
<table width="100%">
..