Getting HTML table to display in one row

Question

Currently I have this,

This my code

 <table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">Monday</th>
      <th scope="col">Tuesday</th>
      <th scope="col">Wednesday</th>
      <th scope="col">Thursday</th>
      <th scope="col">Friday</th>
      <th scope="col">Saturday</th>
      <th scope="col">Sunday</th>
    </tr>
  </thead>
  <tbody>

<?php     
      if(isset($_GET['class_id'])) {
        $class_id = $_GET['class_id'];

            } else {
              $class_id = '1'; //default class id => Yoga
            }

       $mQuery = "SELECT * FROM timetable where class_id = '".$class_id."'"; //code to select from database

        $result = $pdo-> query($mQuery); 

        while($row = $result->fetch(PDO::FETCH_ASSOC)):

            $timeslot = $row['timeslot'];
            // pass delimiter and string to explode function
            $timeslot_ar = explode(',', $timeslot);


      ?>        

    //code to display result in table
    <tr class="table-active">
        <?php if(date('l', strtotime($row['date'])) == 'Monday') { ?>
           <td><?= date('d M', strtotime($row['date'])); ?><br/><?= implode("<br/>", $timeslot_ar); ?></td>

           <?php }else { ?>
           <td></td>
        <?php } ?>

        <?php if(date('l', strtotime($row['date'])) == 'Tuesday') { ?>
           <td><?= date('d M', strtotime($row['date'])); ?><br/><?= implode("<br/>", $timeslot_ar); ?></td>
           <?php }else { ?>
           <td></td>
        <?php } ?>

        <?php if(date('l', strtotime($row['date'])) == 'Wednesday') { ?>
           <td><?= date('d M', strtotime($row['date'])); ?><br/><?= implode("<br/>", $timeslot_ar); ?></td>
           <?php }else { ?>
           <td></td>
        <?php } ?>

        <?php if(date('l', strtotime($row['date'])) == 'Thursday') { ?>
           <td><?= date('d M', strtotime($row['date'])); ?><br/><?= implode("<br/>", $timeslot_ar); ?></td>
           <?php }else { ?>
           <td></td>
        <?php } ?>

        <?php if(date('l', strtotime($row['date'])) == 'Friday') { ?>
           <td><?= date('d M', strtotime($row['date'])); ?><br/><?= implode("<br/>", $timeslot_ar); ?></td>
           <?php }else { ?>
           <td></td>
        <?php } ?>

        <?php if(date('l', strtotime($row['date'])) == 'Saturday') { ?>
           <td><?= date('d M', strtotime($row['date'])); ?><br/><?= implode("<br/>", $timeslot_ar); ?></td>
           <?php }else { ?>
           <td></td>
        <?php } ?>

        <?php if(date('l', strtotime($row['date'])) == 'Sunday') { ?>
           <td><?= date('d M', strtotime($row['date'])); ?><br/><?= implode("<br/>", $timeslot_ar); ?></td>
           <?php }else { ?>
           <td></td>
        <?php } ?>
    </tr>
<?php endwhile; ?> 
  </tbody>
</table> 

I've been trying to get my result to display in a single row for all the days and then make a new row when a day of the same name already exists. I've been trying to figure out the login behind this and after countless of stack overflow answers and youtube tutorials I got to this point. I still can't manage to get them in a single row, if anyone would be kind enough to explain the method behind this, I would really appreciate it.

Answer 1

Managed to fix my issue by scraping off the table and using custom div containers.

Code snippet:

<div class="card" style="width: 9rem;display:inline-block">
  <ul class="list-group list-group-flush">
      <center><li class="list-group-item"><b>Monday</b></li></center>
 <?php             
    $sql = "SELECT * FROM timetable where class_id='$class_id' and day='Monday'";
    $stm = $pdo->query($sql);
    $slots = $stm->fetchAll();
    foreach ($slots as $row) {
        $timeslot = $row['timeslot'];
        // pass delimiter and string to explode function
        $timeslot_ar = explode(',', $timeslot);
        echo '<center>'.date('d M', strtotime($row['date'])).'</center>'.'<li class="list-group-item">'.implode("<br/>", $timeslot_ar). '</li>';
    }
    echo "<br/>";   
?>
  </ul>
</div>

Final product

Answer 2

I'm going to assume the timetable is output in date order in the query. You should probably include an ORDER BY clause to make sure of that. I also assume that the results may cover more than one week. Lastly I'm going to assume that every single day is represented by a row in the results. If it's not the case, then please show a sample of results which demonstrates the reality (as you will need some extra logic to deal with missing days).

Using those assumptions, it looks like you only need to start a new row when the current day is Monday, and end it when it's Sunday. So...move the row creation inside the if for Mondays, and the ending inside the if for Sundays, e.g.:

<?php if(date('l', strtotime($row['date'])) == 'Monday') { ?>
   <tr class="table-active">
...
<?php if(date('l', strtotime($row['date'])) == 'Sunday') { ?>
  </tr>
...

Also, it looks like you actually output the exact same <td> for each day, and you don't want to output blank tds if it's not the mentioned day (because that will add extra cells you don't need in the row), so the whole loop could be simplified as follows:

while($row = $result->fetch(PDO::FETCH_ASSOC)):
    $timeslot = $row['timeslot'];
    // pass delimiter and string to explode function
    $timeslot_ar = explode(',', $timeslot);
?>        

    //code to display result in table
    <?php if(date('l', strtotime($row['date'])) == 'Monday') { ?>
      <tr class="table-active">
    <?php } ?>

       <td><?= date('d M', strtotime($row['date'])); ?><br/><?= implode("<br/>", $timeslot_ar); ?></td>

    <?php if(date('l', strtotime($row['date'])) == 'Sunday') { ?>
      </tr>
    <?php } ?>
<?php endwhile; ?> 

You can also replace the implode/explode with a simple string replacement function...I'll leave that as an exercise for the reader.

Answer 3

Put the <tr></tr> outside of the while() loop:

<tr class="table-active">
<?php     
  // other code

    while($row = $result->fetch(PDO::FETCH_ASSOC)):
        //code for table cells
?>
</tr>