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

当前，我有一个输出表：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>

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

最佳答案

首先从表中删除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;
  }

关于php - 如何将水平表转换为垂直表？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26988926/