Apply Table Style in Dynamic Table Creation with PHP

Question

I am having trouble applying CSS styles to my dynamic table. I am connecting to a database and I know the data is populated correctly and displaying. My issue is that there are 900 records and I want to limit the table size, utilizing a scrollbar. I have read elseware that the proper CSS style nodes to accomplish this are: How to specify table's height such that a vertical scroll bar appears?

overflow: auto;

height: 700px;

display: block;

overflow-y: scroll;

At first I attempted this with inline styling (a no-no.. I realize), but it didn't work. I have read about adding a 'class' to the table and/or individual rows, which would then be reflected in my CSS style sheet, but I can't seem to figure out how to accomplish this. I get syntax errors when I add 'span' or 'class' tag designators to the PHP (I imagine from utilizing 'ECHO' - which both require double quotes).

Good example of what I'm trying to accomplish: http://www.timrivera.com/tests/csstables.html#markupIE

The PHP code snippet below has good syntax, but I don't know where to add the class or span designators appropriately. One thing to note - I need to have different styles for different tables, so changing the global 'table' CSS isn't going to work.

//Function that gets the SQL recordset. 
$result2 = Get_Package_Info_EXT($conn, $var_PartNumber);
//do the table edits here.
   echo "<table border='1' >
  <tr>
  <th>Facility</th>
  <th>Process Flow</th>
  <th>Operation</th>
  <th>Device</th>
  <th>Item</th>
  <th>Value</th>
  <th>Database Source</th>

  </tr>";

  while($row2 = oci_fetch_array($result2)){
  echo "<tr>";
  echo "<td>" . $row2['FACILITY_AT'] . "</td>";
  echo "<td>" . $row2['SUB_FLOW_TYPE'] . "</td>";
  echo "<td>" . $row2['OPN_NAME'] . "</td>";
  echo "<td>" . $row2['SPEC_DEVICE'] . "</td>";
  echo "<td>" . $row2['COMPONENT_NAME'] . "</td>";
  echo "<td>" . $row2['COMPONENT_VALUE'] . "</td>";
  echo "<td>" . $row2['SOURCE'] . "</td>";
  echo "</tr>";
  }
  echo "</table>";

Teaqu · Accepted Answer · 2013-03-22T23:42:09.937

0

I think the best way would be to wrap a div around the table and give the div a height.

http://phpfiddle.org/main/code/i7h-9b1

<style type="text/css">
    #scroll {
        height: 100px; /* Max height of table */
        overflow-y: scroll;
        width: 340px;
    }
</style>

<div id="scroll">
    table
</div>

Using your code:

echo '
<style type="text/css">
     #scroll {
         height: 100px; /* Max height of table */
         overflow-y: scroll;
         width: 340px;
    }
</style>';

//Function that gets the SQL recordset. 
$result2 = Get_Package_Info_EXT($conn, $var_PartNumber);
//do the table edits here.
   echo "<div id='scroll'><table border='1' >
  <tr>
  <th>Facility</th>
  <th>Process Flow</th>
  <th>Operation</th>
  <th>Device</th>
  <th>Item</th>
  <th>Value</th>
  <th>Database Source</th>

  </tr>";

  while($row2 = oci_fetch_array($result2)){
  echo "<tr>";
  echo "<td>" . $row2['FACILITY_AT'] . "</td>";
  echo "<td>" . $row2['SUB_FLOW_TYPE'] . "</td>";
  echo "<td>" . $row2['OPN_NAME'] . "</td>";
  echo "<td>" . $row2['SPEC_DEVICE'] . "</td>";
  echo "<td>" . $row2['COMPONENT_NAME'] . "</td>";
  echo "<td>" . $row2['COMPONENT_VALUE'] . "</td>";
  echo "<td>" . $row2['SOURCE'] . "</td>";
  echo "</tr>";
  }
  echo "</table></div>";

edited Mar 22 '13 at 23:42

answered Mar 22 '13 at 15:42

Teaqu

2,953
1
14
21

-Many thanks for your response. After adding the formatting, I'm not seeing any style changes to the box to a fixed size with a scroll box. I added the following text to the PHP section: - echo "
"; - right after the SQL query and - echo "
"; - after the table. Then I literally copied the code from the link you gave me above the 'body' portion of the .CSS file - and dreamweaver seems to find the #scroll variable and recognizes it.... – user2199434 Mar 22 '13 at 17:51
That sounds to me like you are testing locally with dreamweavers design view? You should upload this somewhere and test off an actual server... Major differences in how dreamweaver loads stuff locally and how a browser actually loads. I bet the previous way worked fine you just didn't know it. – Michael Mar 22 '13 at 18:04
Put
right before the You don't need all the css from the link. All you need is the css in my answer.
– Teaqu Mar 22 '13 at 23:33
Ha! Apparently I had to walk away for a few hours and come back. I didn't realize that you had to add the – user2199434 Mar 25 '13 at 13:19

Michael · Answer 2 · 2013-03-22T18:00:46.487

0

Edit your PHP code to...

//Function that gets the SQL recordset. 
$result2 = Get_Package_Info_EXT($conn, $var_PartNumber);
//do the table edits here.
  echo "<div class=\"table-container\">";
  echo "<table border='1' >
  <tr>
  <th>Facility</th>
  <th>Process Flow</th>
  <th>Operation</th>
  <th>Device</th>
  <th>Item</th>
  <th>Value</th>
  <th>Database Source</th>

  </tr>";

  while($row2 = oci_fetch_array($result2)){
  echo "<tr>";
  echo "<td>" . $row2['FACILITY_AT'] . "</td>";
  echo "<td>" . $row2['SUB_FLOW_TYPE'] . "</td>";
  echo "<td>" . $row2['OPN_NAME'] . "</td>";
  echo "<td>" . $row2['SPEC_DEVICE'] . "</td>";
  echo "<td>" . $row2['COMPONENT_NAME'] . "</td>";
  echo "<td>" . $row2['COMPONENT_VALUE'] . "</td>";
  echo "<td>" . $row2['SOURCE'] . "</td>";
  echo "</tr>";
  }
  echo "</table>";
  echo "</div>";

Then just style using

div.table-container table {}

edited Mar 22 '13 at 18:00

answered Mar 22 '13 at 15:44

Michael

7,016
2
28
41

Thank you for your assistance, but I'm unsure from the code where the
tag begins in what you have submitted... could you please clarify?
– user2199434 Mar 22 '13 at 17:57
Ooof, sorry the code formatting got funky when I added it and I didn't notice. The beginning div tag is above the edgo for the beginning tag. Basically this just wraps your entire table in a div with a class, then you can style from the class relatively like I mentioned at bottom of the answer.
– Michael Mar 22 '13 at 18:01
Let me know if it works and if not what the issue was and maybe I can assist further. – Michael Mar 22 '13 at 18:02

master101 · Answer 3 · 2013-03-22T18:03:16.057

Using Calum's style format you could do this:

//Function that gets the SQL recordset. 
$result2 = Get_Package_Info_EXT($conn, $var_PartNumber);
//do the table edits here.
echo "<style>#size{height:100px;width:340px;overflow-y:scroll;}</style>";
echo "<table id='size' border='1'>
<tr>
<th>Facility</th>
<th>Process Flow</th>
<th>Operation</th>
<th>Device</th>
<th>Item</th>
<th>Value</th>
<th>Database Source</th>

</tr>";

while($row2 = oci_fetch_array($result2)){
echo "<tr>";
echo "<td>" . $row2['FACILITY_AT'] . "</td>";
echo "<td>" . $row2['SUB_FLOW_TYPE'] . "</td>";
echo "<td>" . $row2['OPN_NAME'] . "</td>";
echo "<td>" . $row2['SPEC_DEVICE'] . "</td>";
echo "<td>" . $row2['COMPONENT_NAME'] . "</td>";
echo "<td>" . $row2['COMPONENT_VALUE'] . "</td>";
echo "<td>" . $row2['SOURCE'] . "</td>";
echo "</tr>";
}
echo "</table>";

I tested it and works fine. And for the different table styles you could:

<style>
#table1
{
style code here
}

#table2
{
style code here
}
</style>

and so on... then you could apply them to the tables:

<table id="table1">
...
</table>
<table id="table2">
...
</table>

Yes! This is exactly what I am planning on doing. Thanks to all for your help. — user2199434, Mar 25 '13 at 13:20

Apply Table Style in Dynamic Table Creation with PHP

3 Answers3