ラベル付きのテーブルとdivの間の空白

Question

このテーブルにはRowFilter関数があり、結果が見つからないというメッセージが表示されます。このメッセージは隠しdiv内のラベルです。問題はそのアイテムと次の行に表示されますラベル付きのdivであるはずですが、ブランクのスペースとラベルが表示されます。私は私のラベルに0％のパディングを追加し、divには何も働かないという問題を解決しようとしました。

$(document).ready(function() { 
 
    RowFilter(); 
 
}); 
 

 
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> 
 
<div> 
 
    <input class="form-control" placeholder="Search..." id="buscar" type="text"/> 
 
</div> 
 

 
<hr /> 
 
<table id="Tabla2" class="table table-striped"> 
 
    <thead> 
 
    <tr class="info"> 
 
     <td>ID</td> 
 
     <td>Name</td> 
 
    <td>Description</td> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>Mike</td> 
 
     <td>N/A</td> 
 
    </tr> 
 
    <tr> 
 
     <td>2</td> 
 
     <td>Steven</td> 
 
     <td>N/A</td> 
 
    </tr> 
 
    <tr> 
 
     <td>3</td> 
 
     <td>Tyler</td> 
 
     <td>Active</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<div id="no-results" > 
 
    <label style="width:100%; margin-top:0%;" class="control-label label-warning">No results found... </label> 
 
</div>

Pen with code

Answer 1

ブートストラップのテーブルがmargin-bottom: 20pxです：

は、ここに私のコードです。この値（0に設定）を超えたり、ラベルの余白部分を-20pxに設定することができます。

オプション＃1：

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

オプション＃2：私の意見では

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

、原因ブートストラップのレイアウトは、すべてのレイアウトに影響を与えるという事実に、この場合にはそれが良くなりますno-result divのmargin-topを変更します。 http://codepen.io/anon/pen/pbrvQm

Answer 2

.table { 
    margin-bottom: 0; 
} 

の表は、ダウン見つかりませ結果をプッシュしない20ピクセル下マージンを持っています。ここ
はcodepen取り組んでいます。