带有固定标题和滚动表体的表不允许滚动 [英] Table with fixed header and scrolling table body doesn't let tbody scroll
本文介绍了带有固定标题和滚动表体的表不允许滚动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个bootstrap v.4表，并希望有一个带滚动表体的固定标题。表格的大小应该始终保持在100px的高度和宽度= auto。
I have a bootstrap v.4 table and want to have a fixed header with a scrolling table body. The Size of the table should remain at all time lets say 100px in height and width = auto.
目前这不适用于我附加的代码。
This currently does not work with the code i have attached.
它应该专门用于这张单独的表格，并且不应该干扰我可能在不同区域使用的所有其他表格，所以我已经分配了一个类别，不确定是否这是正确的。
It is supposed to be dedicated to this single table, and should not interfere with all other tables i might use in a different area, so i had assigned a class already, not sure if this is correct.
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>
推荐答案
<试试这个：
Try this:
.table-fixed{
width: 100%;
background-color: #f3f3f3;
tbody{
height:200px;
overflow-y:auto;
width: 100%;
}
thead,tbody,tr,td,th{
display:block;
}
tbody{
td{
float:left;
}
}
thead {
tr{
th{
float:left;
background-color: #f39c12;
border-color:#e67e22;
}
}
}
}
HTML code：
HTML code:
<div class="container">
<table class="table table-fixed">
<thead>
<tr>
<th class="col-xs-3">First Name</th>
<th class="col-xs-3">Last Name</th>
<th class="col-xs-6">E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-xs-3">John</td>
<td class="col-xs-3">Doe</td>
<td class="col-xs-6">johndoe@email.com</td>
</tr>
<tr>
<td class="col-xs-3">John</td>
<td class="col-xs-3">Doe</td>
<td class="col-xs-6">johndoe@email.com</td>
</tr>
<tr>
<td class="col-xs-3">John</td>
<td class="col-xs-3">Doe</td>
<td class="col-xs-6">johndoe@email.com</td>
</tr>
<tr>
<td class="col-xs-3">John</td>
<td class="col-xs-3">Doe</td>
<td class="col-xs-6">johndoe@email.com</td>
</tr>
<tr>
<td class="col-xs-3">John</td>
<td class="col-xs-3">Doe</td>
<td class="col-xs-6">johndoe@email.com</td>
</tr>
<tr>
<td class="col-xs-3">John</td>
<td class="col-xs-3">Doe</td>
<td class="col-xs-6">johndoe@email.com</td>
</tr>
<tr>
<td class="col-xs-3">John</td>
<td class="col-xs-3">Doe</td>
<td class="col-xs-6">johndoe@email.com</td>
</tr>
<tr>
<td class="col-xs-3">John</td>
<td class="col-xs-3">Doe</td>
<td class="col-xs-6">johndoe@email.com</td>
</tr>
<tr>
<td class="col-xs-3">John</td>
<td class="col-xs-3">Doe</td>
<td class="col-xs-6">johndoe@email.com</td>
</tr>
<tr>
<td class="col-xs-3">John</td>
<td class="col-xs-3">Doe</td>
<td class="col-xs-6">johndoe@email.com</td>
</tr>
<tr>
<td class="col-xs-3">John</td>
<td class="col-xs-3">Doe</td>
<td class="col-xs-6">johndoe@email.com</td>
</tr>
<tr>
<td class="col-xs-3">John</td>
<td class="col-xs-3">Doe</td>
<td class="col-xs-6">johndoe@email.com</td>
</tr>
<tr>
<td class="col-xs-3">John</td>
<td class="col-xs-3">Doe</td>
<td class="col-xs-6">johndoe@email.com</td>
</tr>
<tr>
<td class="col-xs-3">John</td>
<td class="col-xs-3">Doe</td>
<td class="col-xs-6">johndoe@email.com</td>
</tr>
<tr>
<td class="col-xs-3">John</td>
<td class="col-xs-3">Doe</td>
<td class="col-xs-6">johndoe@email.com</td>
</tr>
<tr>
<td class="col-xs-3">John</td>
<td class="col-xs-3">Doe</td>
<td class="col-xs-6">johndoe@email.com</td>
</tr>
<tr>
<td class="col-xs-3">John</td>
<td class="col-xs-3">Doe</td>
<td class="col-xs-6">johndoe@email.com</td>
</tr>
<tr>
<td class="col-xs-3">John</td>
<td class="col-xs-3">Doe</td>
<td class="col-xs-6">johndoe@email.com</td>
</tr>
<tr>
<td class="col-xs-3">John</td>
<td class="col-xs-3">Doe</td>
<td class="col-xs-6">johndoe@email.com</td>
</tr>
<tr>
<td class="col-xs-3">John</td>
<td class="col-xs-3">Doe</td>
<td class="col-xs-6">johndoe@email.com</td>
</tr>
</tbody>
</table>
</div>
请检查CodePen： https://codepen.io/anon/pen/OpVORa
Please check out the CodePen : https://codepen.io/anon/pen/OpVORa
这篇关于带有固定标题和滚动表体的表不允许滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
