HTML Table Headers,Rows

Ask about general coding issues or problems here.

Moderators: macek, egami, gesf

robertrfp
New php-forum User
New php-forum User
Posts: 8
Joined: Sun Apr 06, 2014 11:24 am
Location: Englewood, FL

HTML Table Headers,Rows

Postby robertrfp » Sun Apr 13, 2014 2:35 pm

I have an html scrollable table that is populated with mysql database row(s) data. I have a problem with headers not aligning with row detail. I've tried a zillion things without success.

Thanks in advance for your help.

Code follows...

Code: Select all


<!DOCTYPE html>
   <link rel="stylesheet" type="text/css" href="jquery.msgbox.css" />
   <script type="text/javascript" src="jquery.min.js"></script>
   <script type="text/javascript" src="jquery.msgbox.js"></script>

<html>

   <head>

   <script type="text/javascript">

         jQuery(document).ready(function($) {
            $(".clickableRow").click(function() {
               window.document.location = $(this).attr("href");
            });
         });

         function noRows()
         {
            $(document).ready(function() {
               $.msgbox("No events with the specified parameters to report...", {
                  type: "info",
                 buttons: [
                        {type: "submit", value: "Continue"}
                 ]
               }, function(result) {
                  if (result) {
                    window.location.assign("report-choices.php");      
                  }
               });
            });
         }
      </script>

<style>
#events, th, td
{
  border:2px solid #4B0176;
  background-color: white;
  color: white;
}
#events th
{
  background-color: #4B0176;
  height: 45px;
  font-family: Tahoma;
  font-size: 12px;
  color: white;
  padding-left: 15px;
  padding-right: 15px;
}
#events td
{
 height: 30px;
 font-family: Tahoma;
 font-size: 14px;
 color: black;
 padding-left: 25px;
 padding-right: 25px;
}
tr:nth-child(odd) td{
   background-color: #FEFFD7;
}
tr:nth-child(even) td{
   background-color: #A4C3EB;
   color: black;
}
tr:hover td {
  background-color: #A51F3A !important;
  color: #FFFFFF !important;
}
tbody  {
  height: 500px;
  overflow: auto;
}
thead > tr, tbody{
  display:block;
}
</style>

</head>

<body bgcolor=#4B0716>
</body>

<?php

include('connect-to-web.php');

if ($result = $mysqli->query("SELECT * from events order by nextnotify DESC")) {

$row_cnt = $result->num_rows;

if ($row_cnt == 0)
   echo '<script type="text/javascript">
   noRows();
   </script>'; 
else
   echo "<table id='events'><thead>
   <tr>
      <th>Event No.</th>
      <th>Created</th>
      <th>Owner</th>
      <th>Type</th>
      <th>Frequency</th>
      <th>Days</th>
      <th>Last Notify</th>
      <th>Next Notify</th>
      <th>Content</th>
   </tr></thead><tbody>";

while($row = mysqli_fetch_array($result))
{
   echo "<tr class='clickableRow' href='http://ip address goes here/report-choices.php'>";
   echo "<td>" . $row['event_num'] . "</td>";
   echo "<td>" . $row['createdate'] . "</td>";
   echo "<td>" . $row['owner'] . "</td>";
   echo "<td>" . $row['type'] . "</td>";
   echo "<td>" . $row['frequency'] . "</td>";
   echo "<td>" . $row['days'] . "</td>";
   echo "<td>" . $row['lastnotify'] . "</td>";
   echo "<td>" . $row['nextnotify'] . "</td>";
   echo "<td width='500'>" . $row['content'] . "</td>";
   echo "</tr>";
}
echo "</tbody></table>";
}
?>
</html>

Attachments
table.jpg
table.jpg (26.76 KiB) Viewed 222 times
Last edited by robertrfp on Tue Apr 15, 2014 12:02 pm, edited 2 times in total.

seandisanti
php-forum Fan User
php-forum Fan User
Posts: 838
Joined: Mon Oct 01, 2012 12:32 pm

Re: HTML Table Headers,Rows

Postby seandisanti » Sun Apr 13, 2014 11:31 pm

Sounds like a styling issue. Without seeing your code, nobody's going to be able to be too hugely helpful beyond that. There are a lot of css references out there though if you don't want to post it

robertrfp
New php-forum User
New php-forum User
Posts: 8
Joined: Sun Apr 06, 2014 11:24 am
Location: Englewood, FL

Re: HTML Table Headers,Rows

Postby robertrfp » Mon Apr 14, 2014 12:04 pm

Code has been posted. Thanks for your reply...

seandisanti
php-forum Fan User
php-forum Fan User
Posts: 838
Joined: Mon Oct 01, 2012 12:32 pm

Re: HTML Table Headers,Rows

Postby seandisanti » Mon Apr 14, 2014 8:02 pm

nothing is jumping out as obvious oversight in styling. You should move your link and script tags into the head, or atleast into the html block , but I don't think that'd cause any specific issues. do you have any errors in the console? Can you post a screenshot of the way the page looks? or if the page is up at a site that's web accessible, you could post a link and i can go troubleshoot directly

robertrfp
New php-forum User
New php-forum User
Posts: 8
Joined: Sun Apr 06, 2014 11:24 am
Location: Englewood, FL

Re: HTML Table Headers,Rows

Postby robertrfp » Tue Apr 15, 2014 12:14 pm

Hi,

I've attached an image of the output table... When I mod the script to preclude the headers output I can get what I want in the way of presentation therefore, I am going to design an image that will replicate the column headings and display that image above the table without the headers.

In 99% of all cases table output will not require more than one page therefore, my header image displayed only at the beginning will not present a readability issue.

Thanks again for sticking with me on this. I have twenty years of experience with design and development of on-ground business applications using a product named Progress. I surely find this web stuff to be quite a change what with having to use multiple resources as opposed to Progress which includes everything you need including the database itself.

robertrfp

seandisanti
php-forum Fan User
php-forum Fan User
Posts: 838
Joined: Mon Oct 01, 2012 12:32 pm

Re: HTML Table Headers,Rows

Postby seandisanti » Wed Apr 16, 2014 1:49 am

removing the thead and tbody tags and removing explicit padding fixes the formatting on my side. also, you're giving different padding to TH and TD, that could cause issues


Return to “PHP coding => General”

Who is online

Users browsing this forum: Yahoo [Bot] and 2 guests

cron