Question

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

以下是代码：

<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那么这是唯一一次行占据整个宽度但它不再会溢出并占用全屏而不是250px的高度。< / p>

我正在使用Bootstrap。

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

Answer 1

在表格外添加DIV，然后放入溢出

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

Answer 2

将 class =＆＃34; col-md-6＆＃34; 更改为 class =＆＃34; col-md-12＆＃34; 您的代码< / p>

Answer 3

您可以fix the table header，或者只是简单地移动搜索栏和标题，

Excel List<br>
<input type="text" class="form-control" placeholder="Search Excel" ng-keyup="searchExcel()" ng-model="excelSearchTerm">
<div style="overflow-y: auto;display:block;height:250px">
<table width="100%">

css表行没有达到表

3 个答案: