charith charith - 2 months ago 35
PHP Question

Fixed height for bootstrap pre-scrollable DIV

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.

This is my HTML code

<div class="col-md-9">
<div class="pre-scrollable">
<table class="table table-bordered table-hover header-fixed" id="sometable">
<th>Start Date</th>
<th>End Date</th>
<th>Half day</th>
<?php //php code for print the table

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

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;

This is the result web page


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;

That might be the source of your problem.