F. Flores F. Flores - 1 year ago 64
CSS Question

Blank space between table and div with label

I have this table with RowFilter function and I show a message for no results found, this message is a label inside a hidden div, the problem is that appears thead items and the next line it's supposed to be the div with the label but not, appears a blank space and then the label. I tried to solve this adding padding 0% to my label and then to the div but nothing work.

Here is my code:

$(document).ready(function () {

function RowFilter() {
var busqueda = document.getElementById('buscar');
var noResults = document.getElementById('no-results');
var table = document.getElementById("Tabla2").tBodies[0];

buscaTabla = function () {
texto = busqueda.value.toLowerCase();
var match = false;
var r = 0;
while (row = table.rows[r++]) {
if (row.innerText.toLowerCase().indexOf(texto) !== -1) {
row.style.display = null;
match = true;
else {
row.style.display = 'none';
if (!match) {
noResults.style.display = 'block';
else {
noResults.style.display = 'none';
busqueda.addEventListener('keyup', buscaTabla);

#no-results {
display: none;
text-align: center;
font-weight: bold;

<link href="https://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input class="form-control" placeholder="Search..." id="buscar" type="text"/>

<hr />
<table id="Tabla2" class="table table-striped">
<tr class="info">
<div id="no-results" >
<label style="width:100%; margin-top:0%;" class="control-label label-warning">No results found... </label>

Pen with code

Answer Source

Bootstrap's table is a margin-bottom: 20px. You can over this value (set to 0) or set the margin-top of your label as -20px.

Option #1:

<table id="Tabla2" class="table table-striped" style="margin-bottom: 0">

Option #2:

<div id="no-results" style="margin-top: -20px;">

In my opinion, due to that fact that bootstrap's layout will affect all your layout, in this case it will be better to change the margin-top of the no-result div.
Here is a working codepen: http://codepen.io/anon/pen/pbrvQm