如何让住在固定的高度？ Bootstrap 4

Question

我有一个包含动态内容的表，它可以是1行或更多行，最多可能是200行。用户应该能够单击一行，其他内容应显示在另一个表列表的下方。

现在，当我搜索一个项目时，表格会根据找到的记录缩小，假设我有5条记录并查找1条记录，下面的整个表格元素会跳起来。这不是一个好的ux。

我知道有一种方法可以保持桌子或桌子的高度吗？

这是我的代码到目前为止。您可以按“meyer”搜索

function reservationListFunction() {
  // Declare variables
  var input, filter, table, tr, td, i;
  input = document.getElementById("reservationListInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("reservationTable");
  tr = table.getElementsByTagName("tr");

  // Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < tr.length; i++) {
    if (!tr[i].classList.contains('header')) {
      td = tr[i].getElementsByTagName("td"),
      match = false;
      for (j = 0; j < td.length; j++) {
        if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
          match = true;
          break;
        }
      }
      if (!match) {
        tr[i].style.display = "none";
      } else {
        tr[i].style.display = "";
      }
    }
  }
}


jQuery(document).ready(function($) {
    $('#reservationTable tr').each(function () {
       var td_value = $('td',this).eq(4).text();
       console.log(td_value);
       switch (td_value) {
           case 'Expected':
                $(this).addClass('table-success');
               break;
           case 'Inhouse':
                $(this).addClass('table-info');
               break;
           case 'Cancelled':
                $(this).addClass('table-danger');
               break;
           case 'Partial':
                $(this).addClass('table-warning');
               break;
           case 'Finished':
                $(this).addClass('table-active');
               break;

           default:
               // statements_def
               break;
       }
    });
});

$( document ).ready(function() {
    $("#wrapper").toggleClass("toggle");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>



        <div class="container" style="" id="reservationListTable">
            <div class="row">
                    
                </div>
            <input style="margin-top:0.5em" class="form-control" type="text" id="reservationListInput" onkeyup="reservationListFunction()" placeholder="Search for reservation..">

           
            <div classs="container">
            <table class="table table-responsive table-fixed table-fixedResList" id="reservationTable">
                <thead class="">
                    <tr class="header">
                        <th style="width:40%;">Name</th>
                        <th style="width:10%;">Cabin</th>
                        <th style="width:10%;">Guests</th>
                        <th style="width:10%;">Table</th>
                        <th class="hidden-xs-down" style="width:10%;">Status</th>
                        <th class="hidden-xs-down" style="width:5%;">SR</th>
                        <th class="hidden-xs-down" style="width:5%;">DOB</th>
                        <th style="width:10%;">Action</th>
                    </tr>
                </thead>
                <tbody class="">
                    <tr class="">
                        <td class="">Alfreds Futterkiste</td>
                        <td class="">49222</td>
                        <td class="">14</td>
                        <td class="">201</td>
                        <td class="hidden-xs-down">Expected</td>
                        <td class="hidden-xs-down">SR(2)</td>
                        <td class="hidden-xs-down">BD</td>
                        <td class="">
                            <div class="btn-group">
                              <button type="button" class="btn btn-secondary btn-sm">Checkin</button>
                              <button type="button" class="btn btn-secondary btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="sr-only">Toggle Dropdown</span>
                              </button>
                              <div class="dropdown-menu">
                                <a class="dropdown-item" href="#">Cancel</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">Edit</a>
                              </div>
                            </div>
                        </td>
                    </tr>
                    <tr class="">
                        <td class="">Alfreds Futterkiste</td>
                        <td class="">49222</td>
                        <td class="">14</td>
                        <td class="">201</td>
                        <td class="hidden-xs-down">Expected</td>
                        <td class="hidden-xs-down">SR(2)</td>
                        <td class="hidden-xs-down">BD</td>
                        <td class="">
                            <div class="btn-group">
                              <button type="button" class="btn btn-secondary btn-sm">Checkin</button>
                              <button type="button" class="btn btn-secondary btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="sr-only">Toggle Dropdown</span>
                              </button>
                              <div class="dropdown-menu">
                                <a class="dropdown-item" href="#">Cancel</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">Edit</a>
                              </div>
                            </div>
                        </td>
                    </tr>
                    <tr class="">
                        <td class="">Julia Sanders</td>
                        <td class="">10293</td>
                        <td class="">4</td>
                        <td class="">201</td>
                        <td class="hidden-xs-down">Cancelled</td>
                        <td class="hidden-xs-down">SR(2)</td>
                        <td class="hidden-xs-down">BD</td>
                        <td class="">
                            <div class="btn-group">
                              <button type="button" class="btn btn-secondary btn-sm">Checkin</button>
                              <button type="button" class="btn btn-secondary btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="sr-only">Toggle Dropdown</span>
                              </button>
                              <div class="dropdown-menu">
                                <a class="dropdown-item" href="#">Cancel</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">Edit</a>
                              </div>
                            </div>
                        </td>
                    </tr>
                    <tr class="">
                        <td class="">Mirko Meyer</td>
                        <td class="">13293</td>
                        <td class="">2</td>
                        <td class="">132</td>
                        <td class="hidden-xs-down">Partial</td>
                        <td class="hidden-xs-down">SR(2)</td>
                        <td class="hidden-xs-down">BD</td>
                        <td class="">
                            <div class="btn-group">
                              <button type="button" class="btn btn-secondary btn-sm">Checkin</button>
                              <button type="button" class="btn btn-secondary btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="sr-only">Toggle Dropdown</span>
                              </button>
                              <div class="dropdown-menu">
                                <a class="dropdown-item" href="#">Cancel</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">Edit</a>
                              </div>
                            </div>
                        </td>
                    </tr>
                    <tr class="">
                        <td class="">Alfreds Futterkiste</td>
                        <td class="">49222</td>
                        <td class="">14</td>
                        <td class="">201</td>
                        <td class="hidden-xs-down">Expected</td>
                        <td class="hidden-xs-down">SR(2)</td>
                        <td class="hidden-xs-down">BD</td>
                        <td class="">
                            <div class="btn-group">
                              <button type="button" class="btn btn-secondary btn-sm">Checkin</button>
                              <button type="button" class="btn btn-secondary btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="sr-only">Toggle Dropdown</span>
                              </button>
                              <div class="dropdown-menu">
                                <a class="dropdown-item" href="#">Cancel</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">Edit</a>
                              </div>
                            </div>
                        </td>
                    </tr>
                    <tr class="">
                        <td class="">Alfreds Futterkiste</td>
                        <td class="">49222</td>
                        <td class="">14</td>
                        <td class="">201</td>
                        <td class="hidden-xs-down">Expected</td>
                        <td class="hidden-xs-down">SR(2)</td>
                        <td class="hidden-xs-down">BD</td>
                        <td class="">
                            <div class="btn-group">
                              <button type="button" class="btn btn-secondary btn-sm">Checkin</button>
                              <button type="button" class="btn btn-secondary btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="sr-only">Toggle Dropdown</span>
                              </button>
                              <div class="dropdown-menu">
                                <a class="dropdown-item" href="#">Cancel</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">Edit</a>
                              </div>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            </div>
        </div>
        <div class="container">
        <table class="table table-responsive table-fixed" id="reservationDetailTable">
          <tr class="header">
            <th style="width:20%;">Primary Guest</th>
            <th style="width:80%;">Info</th>
          </tr>
          <tr>
            <td rowspan="8">
                <div class="card" style="width: 20rem; border-style: solid; border-color: #ffffff;">
                  <img class="card-img-top img-circle" src="./assets/img/3.jpg" alt="Card image cap">
                  <div class="card-block">
                    <h4 class="card-title">Mark Meyer</h4>
                    <p class="card-text">Cabin 23412</p>
                    <a href="#" class="btn btn-info">EDIT</a>
                  </div>
                </div>
              </td>
            <td>Reservation ID</td>
          </tr>
          <tr>
            <td>Guests Associated</td>
          </tr>
          <tr>
            <td>Reservation Date</td>
          </tr>
          <tr>
            <td>Special Request</td>
          </tr>
          <tr>
            <td></td>
          </tr>
          <tr>
            <td></td>
          </tr>
          <tr>
            <td></td>
          </tr>
          <tr>
            <td></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
          </tr>
        </table>
        </div>

Answer 1

根据评论，您希望给tbody一个固定的高度，因此标题始终可见。如何做到这一点已经在这里描述：https://stackoverflow.com/a/23989771/639035

你需要css：

#reservationTable thead, #reservationTable tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}
#reservationTable tbody {
    height: 100px;
    table-layout: fixed;
    overflow: auto;
    display: block;
    width: 100%;
}

function reservationListFunction() {
  // Declare variables
  var input, filter, table, tr, td, i;
  input = document.getElementById("reservationListInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("reservationTable");
  tr = table.getElementsByTagName("tr");

  // Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < tr.length; i++) {
    if (!tr[i].classList.contains('header')) {
      td = tr[i].getElementsByTagName("td"),
      match = false;
      for (j = 0; j < td.length; j++) {
        if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
          match = true;
          break;
        }
      }
      if (!match) {
        tr[i].style.display = "none";
      } else {
        tr[i].style.display = "";
      }
    }
  }
}


jQuery(document).ready(function($) {
    $('#reservationTable tr').each(function () {
       var td_value = $('td',this).eq(4).text();
       console.log(td_value);
       switch (td_value) {
           case 'Expected':
                $(this).addClass('table-success');
               break;
           case 'Inhouse':
                $(this).addClass('table-info');
               break;
           case 'Cancelled':
                $(this).addClass('table-danger');
               break;
           case 'Partial':
                $(this).addClass('table-warning');
               break;
           case 'Finished':
                $(this).addClass('table-active');
               break;

           default:
               // statements_def
               break;
       }
    });
});

$( document ).ready(function() {
    $("#wrapper").toggleClass("toggle");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<style>
#reservationTable thead, #reservationTable tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}
#reservationTable tbody {
    height: 100px;
    table-layout: fixed;
    overflow: auto;
    display: block;
    width: 100%;
}
</style>


**Full Code:**
(Tested in Chrome)

        <div class="container" style="" id="reservationListTable">
            <div class="row">
                    
                </div>
            <input style="margin-top:0.5em" class="form-control" type="text" id="reservationListInput" onkeyup="reservationListFunction()" placeholder="Search for reservation..">

           
            <div classs="container">
            <table class="table table-responsive table-fixed table-fixedResList" id="reservationTable">
                <thead class="">
                    <tr class="header">
                        <th style="width:40%;">Name</th>
                        <th style="width:10%;">Cabin</th>
                        <th style="width:10%;">Guests</th>
                        <th style="width:10%;">Table</th>
                        <th class="hidden-xs-down" style="width:10%;">Status</th>
                        <th class="hidden-xs-down" style="width:5%;">SR</th>
                        <th class="hidden-xs-down" style="width:5%;">DOB</th>
                        <th style="width:10%;">Action</th>
                    </tr>
                </thead>
                <tbody class="">
                    <tr class="">
                        <td class="">Alfreds Futterkiste</td>
                        <td class="">49222</td>
                        <td class="">14</td>
                        <td class="">201</td>
                        <td class="hidden-xs-down">Expected</td>
                        <td class="hidden-xs-down">SR(2)</td>
                        <td class="hidden-xs-down">BD</td>
                        <td class="">
                            <div class="btn-group">
                              <button type="button" class="btn btn-secondary btn-sm">Checkin</button>
                              <button type="button" class="btn btn-secondary btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="sr-only">Toggle Dropdown</span>
                              </button>
                              <div class="dropdown-menu">
                                <a class="dropdown-item" href="#">Cancel</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">Edit</a>
                              </div>
                            </div>
                        </td>
                    </tr>
                    <tr class="">
                        <td class="">Alfreds Futterkiste</td>
                        <td class="">49222</td>
                        <td class="">14</td>
                        <td class="">201</td>
                        <td class="hidden-xs-down">Expected</td>
                        <td class="hidden-xs-down">SR(2)</td>
                        <td class="hidden-xs-down">BD</td>
                        <td class="">
                            <div class="btn-group">
                              <button type="button" class="btn btn-secondary btn-sm">Checkin</button>
                              <button type="button" class="btn btn-secondary btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="sr-only">Toggle Dropdown</span>
                              </button>
                              <div class="dropdown-menu">
                                <a class="dropdown-item" href="#">Cancel</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">Edit</a>
                              </div>
                            </div>
                        </td>
                    </tr>
                    <tr class="">
                        <td class="">Julia Sanders</td>
                        <td class="">10293</td>
                        <td class="">4</td>
                        <td class="">201</td>
                        <td class="hidden-xs-down">Cancelled</td>
                        <td class="hidden-xs-down">SR(2)</td>
                        <td class="hidden-xs-down">BD</td>
                        <td class="">
                            <div class="btn-group">
                              <button type="button" class="btn btn-secondary btn-sm">Checkin</button>
                              <button type="button" class="btn btn-secondary btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="sr-only">Toggle Dropdown</span>
                              </button>
                              <div class="dropdown-menu">
                                <a class="dropdown-item" href="#">Cancel</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">Edit</a>
                              </div>
                            </div>
                        </td>
                    </tr>
                    <tr class="">
                        <td class="">Mirko Meyer</td>
                        <td class="">13293</td>
                        <td class="">2</td>
                        <td class="">132</td>
                        <td class="hidden-xs-down">Partial</td>
                        <td class="hidden-xs-down">SR(2)</td>
                        <td class="hidden-xs-down">BD</td>
                        <td class="">
                            <div class="btn-group">
                              <button type="button" class="btn btn-secondary btn-sm">Checkin</button>
                              <button type="button" class="btn btn-secondary btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="sr-only">Toggle Dropdown</span>
                              </button>
                              <div class="dropdown-menu">
                                <a class="dropdown-item" href="#">Cancel</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">Edit</a>
                              </div>
                            </div>
                        </td>
                    </tr>
                    <tr class="">
                        <td class="">Alfreds Futterkiste</td>
                        <td class="">49222</td>
                        <td class="">14</td>
                        <td class="">201</td>
                        <td class="hidden-xs-down">Expected</td>
                        <td class="hidden-xs-down">SR(2)</td>
                        <td class="hidden-xs-down">BD</td>
                        <td class="">
                            <div class="btn-group">
                              <button type="button" class="btn btn-secondary btn-sm">Checkin</button>
                              <button type="button" class="btn btn-secondary btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="sr-only">Toggle Dropdown</span>
                              </button>
                              <div class="dropdown-menu">
                                <a class="dropdown-item" href="#">Cancel</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">Edit</a>
                              </div>
                            </div>
                        </td>
                    </tr>
                    <tr class="">
                        <td class="">Alfreds Futterkiste</td>
                        <td class="">49222</td>
                        <td class="">14</td>
                        <td class="">201</td>
                        <td class="hidden-xs-down">Expected</td>
                        <td class="hidden-xs-down">SR(2)</td>
                        <td class="hidden-xs-down">BD</td>
                        <td class="">
                            <div class="btn-group">
                              <button type="button" class="btn btn-secondary btn-sm">Checkin</button>
                              <button type="button" class="btn btn-secondary btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="sr-only">Toggle Dropdown</span>
                              </button>
                              <div class="dropdown-menu">
                                <a class="dropdown-item" href="#">Cancel</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="#">Edit</a>
                              </div>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
            </div>
        </div>
        <div class="container">
        <table class="table table-responsive table-fixed" id="reservationDetailTable">
          <tr class="header">
            <th style="width:20%;">Primary Guest</th>
            <th style="width:80%;">Info</th>
          </tr>
          <tr>
            <td rowspan="8">
                <div class="card" style="width: 20rem; border-style: solid; border-color: #ffffff;">
                  <img class="card-img-top img-circle" src="./assets/img/3.jpg" alt="Card image cap">
                  <div class="card-block">
                    <h4 class="card-title">Mark Meyer</h4>
                    <p class="card-text">Cabin 23412</p>
                    <a href="#" class="btn btn-info">EDIT</a>
                  </div>
                </div>
              </td>
            <td>Reservation ID</td>
          </tr>
          <tr>
            <td>Guests Associated</td>
          </tr>
          <tr>
            <td>Reservation Date</td>
          </tr>
          <tr>
            <td>Special Request</td>
          </tr>
          <tr>
            <td></td>
          </tr>
          <tr>
            <td></td>
          </tr>
          <tr>
            <td></td>
          </tr>
          <tr>
            <td></td>
          </tr>
          <tr>
            <td></td>
            <td></td>
          </tr>
        </table>
        </div>