用邊框css填充表空行

因此，我有一個表的指定區域，有時從數據庫中讀取後，表沒有完全填充到該區域的底部。對於空白的空間，我想在它周圍有一個邊框連接到表格，所以它看起來像表格一直到底部，但剩餘的空間將只是一個由邊框包圍的大空白空間（看起來像它的一部分的表）用邊框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/

來源

2016-08-24 user308553

您應該添加一些不同的類和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; 
}

，你也需要一個新的類添加到第一臺以去除多餘的邊框比如我叫我的課沒有底

<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

來源

2016-08-24 14:24:59 Majid

用邊框css填充表空行

回答

相關問題