表和div與標籤之間的空白

Question

我有這個表與RowFilter函數，我顯示沒有找到結果的消息，此消息是一個隱藏的div內的標籤，問題是出現thead項目和下一行它是應該是與標籤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。
這裏是一個工作codepen：http://codepen.io/anon/pen/pbrvQm

Answer 2

.table { 
    margin-bottom: 0; 
} 

該表具有20像素的底部邊緣發現推下來沒有結果。