user308553 user308553 -4 years ago 188
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


<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_{{}}">
<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>

<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-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 data-ng-if="item.type === 'GUID'">

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



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

A pic of what the codes does, and what I want it to look like:

Answer Source

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

Here is your complete code :

To clarify:

You class must have border right and left

  height: 720px; 
  border-right:1px solid #ddd;
  border-left:1px solid #ddd;
  padding: 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_{{}}">

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

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download