Updating table using PHP is overriding CSS formatting - php

Question

I am using PHP to call data from a Microsoft SQL Database. That functionality is working, however when PHP updates the table's data it is overriding some of the formatting. One big specification I wanted was to have a max-height of 400px and once it crosses that the table becomes scroll-able.
Some context: I am running this on a local PHP server.
I have tried adding !important tags but that did not work.
<table id = 'tbl' class='table'>
<thead id = 'heading'>
<tr>
<td scope="col" >Applicant ▼</td>
<td scope="col">Grantee EIN</td>
<td scope="col">State</td>
<td scope="col">FAC Accepted Date</td>
<td scope="col">Expenditures</td>
<td scope="col">Prior Finding</td>
<td scope="col">Audit</td>
</tr>
</thead>
<div id = 'scrollbody'>
<tbody>
<?php
$result = array();
do {
while ($row = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC)){
echo '
<tr>
<td>'.$row["AUDITEENAME"].'</td>
<td>'.$row["EIN"].'</td>
<td>'.$row["STATE"].'</td>
<td>'.$row["FACACCEPTEDDATE"].'</td>
<td>'.$row["TOTFEDEXPEND"].'</td>
<td>'.$row["PYSCHEDULE"].'</td>
<td><input type="checkbox" oninput=""></td>
</tr>
';
}
} while (sqlsrv_next_result($stmt));
// sqlsrv_free_stmt($stmt);
// sqlsrv_close($conn); //Close the connnectiokn first
// echo json_encode($result); //You will get the encoded array variable
?>
</tbody>
</div>
</table>
#tbl {
margin: auto;
top: 0px;
height: 100%;
max-height: 400px;
position: relative;
font-family: 'Segoe UI';
box-shadow: 0px 0px 5px 2px rgb(240, 240, 240);
perspective: 1px;
border-radius: 0px 0px 20px 20px;
white-space: nowrap;
width: 100%;
z-index: 1;
}
What I want to see is a table of 400px height, but instead a table of much longer height is being displayed.

Answer 1

So, there are 2 options:
Wrap the table in with a wrapper and give the max-height to that element.
<div id="table-wrapper">
<table>
{Your stuff...}
</table>
</div>
Give the thead, tbody a display: block property. With which again your CSS styles will come into use.

Answer 2

First you need to know how a browser works.
The browser will not show anything until this steps are made:
Your browser request a file like html or php first.
Then it will check the styling (CSS/SCSS).
Checking for JavaScript.
checking for source like an image or other media.
Only then it will display the page.
So if you want to style after this process, you will need JavaScript.
JavaScript is invented to manipulate or modify the DOM (document object Model).
That means, you can point to an element and style it, remove it, add a new element etc.
For a better format I prefer jQuery.
jQuery is another way to code JavaScript. (jQuery = JavaScript, just in another form) jQuery calls the JS library.

Answer 3

you can't set header of a table, a table height is based on his content, if you need a table with a specific height you need to change the display type and add overflow rule:
#tbl {
margin: auto;
top: 0px;
height: 100px;
max-height: 400px;
position: relative;
font-family: 'Segoe UI';
box-shadow: 0px 0px 5px 2px rgb(240, 240, 240);
perspective: 1px;
border-radius: 0px 0px 20px 20px;
white-space: nowrap;
width: 100%;
z-index: 1;
display:block;
overflow:auto;
}
Here a live fiddle https://jsfiddle.net/g7fuLhyp/