0
我有一個引導程序v.4表，並且希望具有滾動表體的固定標題。表的大小應始終保持在100px的高度和寬度=自動。帶固定標題和滾動表體的表不會讓tbody滾動
這目前不適用於我附加的代碼。
它應該是專門用於這張單獨的表格，並且不應該干擾我可能在不同區域使用的所有其他表格，所以我已經分配了一個類別，不知道這是否正確。
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;
}
});
});@media screen and (min-width: 699px) {
table-scrollTBody {
display: block;
height: 300px;
overflow: auto;
}
scrollTBody {
display: block;
height: 200px;
overflow: auto;
}
table-scrollTBodyThead, scrollTBody tr, table-scrollTBodyThead tr {
display: table;
width: 100%;
table-layout: fixed;
}
scrollTD {
word-wrap: break-word;
}
}
@media screen and (max-width: 700px) {
table-scrollTBody {
display: block;
height: 250px;
overflow: auto;
}
scrollTBody {
display: block;
height: 200px;
overflow: auto;
}
table-scrollTBodyThead, scrollTBody tr, table-scrollTBodyThead tr {
display: table;
table-layout: fixed;
}
scrollTD {
word-wrap: break-word;
}
}<script src="https://code.jquery.com/jquery-3.1.1.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 class="col-md-12">
<div class="input-daterange input-group sandbox-container" style="margin-top:0.5em" id="datepicker">
<input type="text" class="input-sm form-control" name="start" />
<span class="input-group-addon">to</span>
<input type="text" class="input-sm form-control" name="end" />
</div>
</div>
</div>
<input style="margin-top:0.5em" class="form-control" type="text" id="reservationListInput" onkeyup="reservationListFunction()" placeholder="Search for reservation..">
<table class="table table-responsive table-fixed table-scrollTBody" id="reservationTable">
<thead class="table-scrollTBodyThead">
<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="scrollTBody">
<tr class="">
<td class="scrollTD">Alfreds Futterkiste</td>
<td class="scrollTD">49222</td>
<td class="scrollTD">14</td>
<td class="scrollTD">201</td>
<td class="hidden-xs-down scrollTD">Expected</td>
<td class="hidden-xs-down scrollTD">SR(2)</td>
<td class="hidden-xs-down scrollTD">BD</td>
<td class="scrollTD">
<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="scrollTD">Alfreds Futterkiste</td>
<td class="scrollTD">49222</td>
<td class="scrollTD">14</td>
<td class="scrollTD">201</td>
<td class="hidden-xs-down scrollTD">Expected</td>
<td class="hidden-xs-down scrollTD">SR(2)</td>
<td class="hidden-xs-down scrollTD">BD</td>
<td class="scrollTD">
<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="scrollTD">Alfreds Futterkiste</td>
<td class="scrollTD">49222</td>
<td class="scrollTD">14</td>
<td class="scrollTD">201</td>
<td class="hidden-xs-down scrollTD">Cancelled</td>
<td class="hidden-xs-down scrollTD">SR(2)</td>
<td class="hidden-xs-down scrollTD">BD</td>
<td class="scrollTD">
<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="scrollTD">Alfreds Futterkiste</td>
<td class="scrollTD">49222</td>
<td class="scrollTD">14</td>
<td class="scrollTD">201</td>
<td class="hidden-xs-down scrollTD">Finished</td>
<td class="hidden-xs-down scrollTD">SR(2)</td>
<td class="hidden-xs-down scrollTD">BD</td>
<td class="scrollTD">
<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="scrollTD">Alfreds Futterkiste</td>
<td class="scrollTD">49222</td>
<td class="scrollTD">14</td>
<td class="scrollTD">201</td>
<td class="hidden-xs-down scrollTD">Inhouse</td>
<td class="hidden-xs-down scrollTD">SR(2)</td>
<td class="hidden-xs-down scrollTD">BD</td>
<td class="scrollTD">
<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="scrollTD">Alfreds Futterkiste</td>
<td class="scrollTD">49222</td>
<td class="scrollTD">14</td>
<td class="scrollTD">201</td>
<td class="hidden-xs-down scrollTD">Partial</td>
<td class="hidden-xs-down scrollTD">SR(2)</td>
<td class="hidden-xs-down scrollTD">BD</td>
<td class="scrollTD">
<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="scrollTD">Alfreds Futterkiste</td>
<td class="scrollTD">49222</td>
<td class="scrollTD">14</td>
<td class="scrollTD">201</td>
<td class="hidden-xs-down scrollTD">Expected</td>
<td class="hidden-xs-down scrollTD">SR(2)</td>
<td class="hidden-xs-down scrollTD">BD</td>
<td class="scrollTD">
<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>
它母鹿沒有解決我的問題，只有這個CSS分配給一個專用的表，但謝謝。 – Chris
@Chris：請檢查更新後的答案並添加codepen以供參考。希望這對你有用。 –