0
我有一個包含動態內容的表格，它可以是1行或更多行，最可能是200行。用戶應該能夠單擊一行，並在下一個表格列表中顯示其他內容。如何讓<table>保持在固定高度？ Bootstrap 4
現在，當我搜索一個項目時，表格會根據找到的記錄收縮，可以說我有5條記錄並查找1條記錄，下面的整個表格元素都會跳轉。這不是一個好的方法。
我知道有一種方法來保持表或表體的高度？
這是我的代碼到目前爲止。您可以通過「邁爾」
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>
片斷包含了一些錯誤！請編輯它！ –
爲什麼你不只是用css給表格固定的高度？像#reservationTable {height：200px; } – Stefan
雖然給這個高度是一件好事，但我也需要讓標題留下。否則它會滾動。 – Chris