如何将水平表转换为垂直表？

Question

Currently I have a output table: Output demo

I wanted the expected output as: Expected output demo

Till now I've tried: Please someone help me how can I do this. :)

<?php

date_default_timezone_set('Asia/Dhaka');
$first_time_slot = "00:00:00 - 06:00:00";
$second_time_slot = "06:01:00 - 12:00:00";
$third_time_slot = "12:01:00 - 18:00:00";
$fourth_time_slot = "18:01:00 - 23:59:59";

$sql1 = mysql_query("SELECT date(`calldate`) as date, count(`src`)as total_caller, sum(`duration`) as total_duration FROM `cdr` WHERE `calldate` BETWEEN '2014-11-17 00:00:00' AND '2014-11-17 06:00:00' AND `accountcode` = '09614008155'");

$sql2 = mysql_query("SELECT date(`calldate`) as date, count(`src`)as total_caller, sum(`duration`) as total_duration FROM `cdr` WHERE `calldate` BETWEEN '2014-11-17 06:01:00' AND '2014-11-17 12:00:00' AND `accountcode` = '09614008155'");

$sql3 = mysql_query("SELECT date(`calldate`) as date, count(`src`)as total_caller, sum(`duration`) as total_duration FROM `cdr` WHERE `calldate` BETWEEN '2014-11-17 12:01:00' AND '2014-11-17 18:00:00' AND `accountcode` = '09614008155'");

$sql4 = mysql_query("SELECT date(`calldate`) as date, count(`src`)as total_caller, sum(`duration`) as total_duration FROM `cdr` WHERE `calldate` BETWEEN '2014-11-17 18:01:00' AND '2014-11-17 23:59:59' AND `accountcode` = '09614008155'");

?>
    <div class="container">         
        <section>
            <table border="1" width="90%" class="fancy">
                    <tr>
                        <th>Date</th>
                        <th>Time-Slot</th>
                        <th>Total Caller</th>
                        <th>Total Duration</th>
                    </tr>
                </tbody>
                <?php if(isset($first_time_slot)):?>
                <?php 
                    while($row1 = mysql_fetch_assoc($sql1)){?>
                <tr>
                    <td><?php echo $row1['date'];?></td>
                    <td><?php echo $first_time_slot;?></td>
                    <td><?php echo $row1['total_caller'];?></td>
                    <td><?php echo $row1['total_duration'];?></td>
                </tr>
                <?php } ?>
                <?php endif; ?>

                <?php if(isset($second_time_slot)):?>
                <?php 
                    while($row2 = mysql_fetch_assoc($sql2)){?>
                <tr>
                    <td><?php echo $row2['date'];?></td>
                    <td><?php echo $second_time_slot;?></td>
                    <td><?php echo $row2['total_caller'];?></td>
                    <td><?php echo $row2['total_duration'];?></td>
                </tr>
                <?php } ?>
                <?php endif; ?> 

                <?php if(isset($third_time_slot)):?>
                <?php 
                    while($row3 = mysql_fetch_assoc($sql3)){?>
                <tr>
                    <td><?php echo $row3['date'];?></td>
                    <td><?php echo $third_time_slot;?></td>
                    <td><?php echo $row3['total_caller'];?></td>
                    <td><?php echo $row3['total_duration'];?></td>
                </tr>
                <?php } ?>
                <?php endif; ?>             

                <?php if(isset($fourth_time_slot)):?>
                <?php 
                    while($row4 = mysql_fetch_assoc($sql4)){?>
                <tr>
                    <td><?php echo $row4['date'];?></td>
                    <td><?php echo $fourth_time_slot;?></td>
                    <td><?php echo $row4['total_caller'];?></td>
                    <td><?php echo $row4['total_duration'];?></td>
                </tr>
                <?php } ?>
                <?php endif; ?> 
                <tr bgcolor="#FF0000" style="color:#FFFFFF;">
                    <td>Total:</td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>   
            </table>
        </section>
    </div>

I just wanted to format the table as given output demo link above.Thanks in advanced. :)

Answer 1

First Remove the border="1" from the table.

Add the below Styles in your CSS.

 .fancy
 {
   border-top:1px solid #000;
   border-right:1px solid #000;
 }
 .fancy th, .fancy td
 {
   border-bottom:1px solid #000;
   border-left:1px solid #000;
   background-color:#ccc;
   padding:5px;
   font-family:Arial;
   font-size:13px;
   color:#000;
   text-align:left; 
 }
 .fancy th
 {       
   font-weight:700; 
 } 
 .fancy tr:last-child td
 {
   color:#fff;
   background-color:red;
  }