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

Question

目前我有一个输出表:Output demo

我想要的预期输出为:Expected output demo

到目前为止，我已经尝试过:请有人帮助我，我该怎么做。 :)

<?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>

我只是想按照上面给定的输出演示链接来格式化表格。在此先感谢您。 :)

Answer 1

首先从表中删除 border="1"。

在您的 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;
  }