[英]filling up a table empty rows with a border css
因此,我為表指定了區域,有時從數據庫讀取數據后,表並沒有完全填充到該區域的底部。 對於空白空間,我希望周圍有一個邊框連接到表格,因此它看起來好像表格一直到底部,但是剩余的空間只是邊框所包圍的一個很大的空白空間(看起來像是它的一部分)的桌子)
有關如何操作的任何提示? 寧願只使用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>
這是引導程序。 唯一的CSS樣式是類user-table
, height: 720
代碼功能以及我想要的外觀的圖片: https : //awwapp.com/s/c7447569-50a4-49a7-805b-43eb0770985f/
您應該添加一些不同的類和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
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.