固定高度,用于引导式预滚动DIV [英] Fixed height for bootstrap pre-scrollable DIV
问题描述
在我的应用程序中,我必须显示bootsatarp网格以用于数据库记录.由于记录数足够大而无需全页滚动即可查看,因此我使用了引导程序可预滚动div来包装我的表,它为我提供了滚动表的功能.但是,DIV大小始终是浏览器窗口的一半.我尝试了几乎所有堆栈溢出的帖子和建议,但它们根本不适合我.我还尝试通过Java脚本支持修复此问题,但它也失败了.
In my application I have to display bootsatarp grid for database records. Since the number of records count are large enough to view without full page scrolling I wrap my table with bootstrap pre-scrollable div and it gave me the functionality to scroll the table. However all the time DIV size is half of the browser windows. I tried almost every stack overflow posts and suggestions and simply they not work for me. I also tried to fix this with support of java script and it also failed.
这是我的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的高度设置为浏览器窗口的固定值或全值.以下是使用
I populate above table with the results of PHP code. I have not idea how to set this DIV's height to fixed value or full value of the browser windows.below are the CSS that are use
<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属性.
There is a max-height property set for the .pre-scrollable div in the bootstrap css file.
.pre-scrollable {
max-height: 340px;
overflow-y: scroll;
}
这可能是问题的根源.
这篇关于固定高度,用于引导式预滚动DIV的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!