Question

所以我有一个表格的指定区域，有时在从数据库读取后，表格不会完全填满该区域的底部。对于空白空间，我希望它周围有一个连接到桌子的边框，所以看起来桌子一直到底部，但剩下的空间只是一个由边框包围的大空空间（看起来像＆＃ 39;表格的一部分）

有关如何操作的提示吗？更喜欢只使用css

代码：

    <div class="col-md-11" style="width:86%">
        <div class="table-responsive user-table" style="overflow-y:auto; overflow-x:hidden">
            <table class="table table-striped table-bordered" id="table_{{table.name}}">
                <thead>
                    <tr>
                        <th ng-repeat="header in table.headers track by $index" style="background-color: #0D3C47; color:white">
                            <div data-ng-if="header.type !== 'checkbox'">{{header}}</div>
                            <div data-ng-if="header.type === 'checkbox'">{{header.value}}</div>
                        </th>

                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="row in table.rows track by $index">
                        @*<tr ng-repeat="row in table.rows | activeOrNot: table.checkboxCol: table.filterIsEnabled track by $index">*@

                        <td ng-repeat="item in row | filter: {type: '!GUID'} track by $index "
                            ng-click="table.selectedRow(row)"
                            ng-class="{ 'highlight' : row === table.selected}">

                            <div data-ng-if="item.type === undefined">{{item}}</div>
                            <div data-ng-if="item.type === 'checkbox'">
                                <input type="checkbox" ng-checked="item.checked" ng-disabled="true">
                            </div>
                            <div data-ng-if="item.type === 'GUID'">
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <table class="table table-striped table-bordered">
            <thead>
                <tr>
                    <th class="text-right" style="padding-right: 30px; font-size: 15px">
                        <div>Showing result {{table.entries.displayingAmount}} of {{table.entries.totalAmount}}</div>
                    </th>

                </tr>
            </thead>
        </table>

    </div>

这是bootstrap。唯一的css样式是类user-table有一个height: 720

代码所做的图片，以及我想要它的样子： https://awwapp.com/s/c7447569-50a4-49a7-805b-43eb0770985f/

Answer 1

您应该添加一些不同的类和Div作为新容器

以下是您的完整代码：http://codepen.io/mhadaily/pen/PzAPEW

澄清：

你的班级必须有左右边框

.user-table{
  height: 720px; 
  border-right:1px solid #ddd;
  border-left:1px solid #ddd;
  padding: 0px;
  border-top:0px;
  border-bottom:0px;
}

并且您还需要向第一个表添加一个新类以删除额外的边框，例如我将我的类命名为no-bottom

<table class="table table-striped table-bordered no-bottom" id="table_{{table.name}}">

尝试删除css中的边框随意修改

.table-bordered.no-bottom{
  margin-bottom:0px;
  border-right:0px;
  border-left:0px;
}

然后现在您可能还需要更改以下类中的边框：

.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{ }

请记住，您应该将自定义类添加到上面的类别中，以避免全局更改。

是的。你有你想要的。你可以在http://codepen.io/mhadaily/pen/PzAPEW

看到结果

用边框css填充表空行

1 个答案: