在我的应用程序中,我必须为数据库记录显示 bootsatarp 网格。由于记录数足够大,无需整页滚动即可查看,因此我用 Bootstrap 预滚动 div 包装了我的表格,它为我提供了滚动表格的功能。然而,DIV 大小始终是浏览器窗口的一半。我几乎尝试了所有堆栈溢出的帖子和建议,但它们对我不起作用。我还尝试通过支持 java 脚本来修复此问题,但它也失败了。
这是我的HTML代码
<div class="col-md-9">
<div class="pre-scrollable">
<table class="table table-bordered table-hover header-fixed" id="sometable">
<thead>
<tr>
<th>EMP_No</th>
<th>Name</th>
<th>Designation</th>
<th>Department</th>
<th>Type</th>
<th>#Days</th>
<th>Start Date</th>
<th>End Date</th>
<th>Half day</th>
<th>Status</th>
</tr>
</thead>
<tbody>
</tbody>
<?php //php code for print the table
?>
</div>
</div>
我用 PHP 代码的结果填充了上表。我不知道如何将此 DIV 的高度设置为浏览器窗口的固定值或完整值。下面是使用的 CSS
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: center;
padding: 1px;
}
thead th {
text-align: center;
background-color: #3498db;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
最佳答案
bootstrap css 文件中为 .pre-scrollable div 设置了 max-height 属性。
.pre-scrollable {
max-height: 340px;
overflow-y: scroll;
}
这可能是您问题的根源。
关于javascript - Bootstrap 预滚动 DIV 的固定高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39147226/