css表格行没有达到表格的宽度答案

【问题标题】：css table row not going up to width of tablecss表格行没有达到表格的宽度
【发布时间】：2018-03-10 21:53:13
【问题描述】：

我有一个设置为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，那么这是唯一一次行占据整个宽度，但它不会再溢出，而是占据全屏而不是 250 像素的高度。

我正在使用 Bootstrap。

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

【问题讨论】：

删除display: block...你为什么需要那个？
你能提供有效的sn-p代码吗...？
@kukkuz 如果我删除它，overflow-y 将不再适用于 250px 的高度。
我设法找到了解决方法。我刚刚为标题添加了另一个表和另一个包含在具有溢出-y 和显示块的 div 中的表。

标签： css html-table row bootstrap-4

【解决方案1】：

在表外加一个DIV然后放溢出

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

【讨论】：

它有效，但我需要“Excel 列表”和搜索栏保持在顶部。
我设法找到了解决方法。我刚刚为标题添加了另一个表和另一个包含在具有溢出-y 和显示块的 div 中的表。

【解决方案2】：

将 class="col-md-6" 更改为 class="col-md-12" 您的代码

【讨论】：

宽度刚刚改变，但行数还是一样。

【解决方案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%">

【讨论】：