user308553 user308553 - 3 months ago 15
HTML Question

filling up a table empty rows with a border css

So I have a designated area for a table, and sometimes the table doesn't get filled up completely to the bottom of that area after reading from database. For the empty spaces I want to have a border around it connecting to the table, so it looks like the table is all the way to the bottom but the remaining space will just be a big empty space enclosed by a border (looks like it's part of the table)

Any tips on how to do that? prefer to use only css

code:

<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>


This is bootstrap. The only css styling for this is the class
user-table
has a
height: 720


A pic of what the codes does, and what I want it to look like:
https://awwapp.com/s/c7447569-50a4-49a7-805b-43eb0770985f/

Answer

You should add some different class and Div as a new container

Here is your complete code : http://codepen.io/mhadaily/pen/PzAPEW

To clarify:

You class must have border right and left

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

and also you need to add a new class to first table to remove extra borders for example I named my class no-bottom

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

try to remove border in css feel free to modify as much as you want

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

and then now you may also need to change border in classes below:

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

remember you should add your custom class to the classed above to avoid global change.

that's it. you have what you want. you can see result here http://codepen.io/mhadaily/pen/PzAPEW

Comments