jquery - 表格和带标签的 div 之间的空白

Question

我有这个带有 RowFilter 函数的表，我显示一条消息表示没有找到结果，这条消息是隐藏 div 内的标签，问题是出现了 thead 元素，下一行应该是带有标签的 div但不是，出现一个空格，然后是标签。我试图解决这个问题，将 padding 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

Bootstrap 的表是一个 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;">

在我看来，由于 bootstrap 的布局会影响您的所有布局，在这种情况下最好更改 margin-top的 no-result分区
这是一个工作代码笔:http://codepen.io/anon/pen/pbrvQm