在我的应用程序中,我必须显示数据库记录的 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>
这是结果网页 https://i.stack.imgur.com/UAudh.jpg
bootstrap css 文件中为 .pre-scrollable div 设置了 max-height 属性。
.pre-scrollable {
max-height: 340px;
overflow-y: scroll;
}
这可能是你的问题的根源。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)