Updating table using PHP is overriding CSS formatting

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.

Parth Shah · Accepted Answer · 2019-07-25 15:23:23Z

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.

answered Jul 25, 2019 at 15:23

Parth Shah

262 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

AndyNope · Accepted Answer · 2019-07-25 15:19:24Z

0

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.

answered Jul 25, 2019 at 15:19

AndyNope

4496 silver badges13 bronze badges

Comments

red · Accepted Answer · 2019-07-25 15:27:28Z

0

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/

answered Jul 25, 2019 at 15:27

red

1,6491 gold badge14 silver badges41 bronze badges

Collectives™ on Stack Overflow

Updating table using PHP is overriding CSS formatting

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related