表格显示列中的标题而不是行答案

【问题标题】：Table shows headers in a column not as a row表格显示列中的标题而不是行
【发布时间】：2014-02-13 10:28:38
【问题描述】：

我对这个有点困惑。我有我的代码来显示它不会以我希望的格式显示它，我希望它是：

section    serial    bike    time
info1      info2     info3   info4
info1      info2     info3   info4
info1      info2     info3   info4
info1      info2     info3   info4

等等..

但是我的代码显示为：

section
serial
bike
time

info1    info1    info1    info1
info2    info2    info2    info2

等

我的代码如下：

<div class="table" style="width:100%;" > 
      <?php

           # table 1

            print '<div class="thead">'; #thead

                   print '      <div class="th"><div class="spaced"></div>';
               print 'Section';
               print '      </div>';

               print '      <div class="th"><div class="spaced"></div>';    
               print 'Serial';
               print '      </div>';

               print '      <div class="th"><div class="spaced"></div>';    
               print 'Bike';
               print '      </div>';

               print '      <div class="th"><div class="spaced"></div>';    
               print 'Time';
               print '      </div>';
          print '</div>'; #thead  


        print '<div class="tbody">';  #tbody
        for ($i=1;$i<=$num_rows;$i++) 
        {
           print '<div class="tr">';
             for ($x=1;$x<=2;$x++)
             {

               if ($x == 1)
                   $row_pos = $i;
               else
                   $row_pos = $num_stations - $i;

               print '<div class="td">';
               print '<div class="table">';
               print '   <div class="tr"  format me        >';    
               print '      <div class="td"><div class="spaced"></div>';     
               print $station_detail[$row_pos]['station_name'];
               print '      </div>';
               print '      <div class="td"><div class="spaced"></div>';    
               print $station_detail[$row_pos]['station_name'];;
               print '      </div>';
               print '      <div class="td"><div class="spaced"></div>';
               print $station_detail[$row_pos]['station_name'];
               print '      </div>';
               print '      <div class="td"><div class="spaced"></div>';
               print $station_detail[$row_pos]['station_name'];
               print '      </div>';
               print '   </div></div>';
             }

           print '</div>'; #tr
           print '</div>'; #tbody
        }
     ?>

        </div>
  </div><!-- close table -->

我知道这是我的 css 的格式问题：

 .table {display: table;width:600px;position:relative;margin:0 auto;}
.tr {display: table-row;}
.td {display: table-cell;}

.table
{
    border-collapse: collapse;
    width:auto;

}
.tr 
{
    border-collapse: collapse;
    float:left;
    text-align:left;
    height:auto;
    width:25%;

}
.th{
    border-collapse: collapse;
    border: 1px solid black;
    font-size:20px;
    height:40px;
    vertical-align: middle;
    width:25%;

    }


.thead{
    border-collapse: collapse;
    border: 1px solid black;
    font-size:20px;
    height:40px;
    vertical-align: middle;
    width:25%;

    }


.td{
    border-collapse: collapse;
    border: 1px solid black;
    font-size:20px;
    height:40px;
    vertical-align: middle;
    width:25%;
    }

.td1{
    text-align:left;
    font-weight:bold;
    float:left;
    margin:15px; 
    width:25%;
    }
.screenpos{
    width:100%;
    margin:0 auto;
    vertical-align: middle;
}

谁能指导我哪里出错了？我不熟悉将表格放在 div 等中。

【问题讨论】：

好的，所以当我输入它时它也不显示它，我希望它在顶部有部分串行自行车时间，我的垂直下降，然后细节也能正确显示！
<div class="td"> - 您是否尝试使用 div 复制 <table> 标记？？
在这种情况下为什么还要使用 div 而不是表格？
是的，尝试使用 div 创建表格并看到表格很快将无法工作，我想练习使用 div 制作表格。
and seeing as tables will soon not work - 什么？如果您使用表格数据，请使用<table>

标签： php css formatting css-tables

【解决方案1】：

你的表结构应该是这样的：

<table>
    <tr>
        <th>Table heading 1</th>
        <th>Table heading 2</th>
        <th>Table heading 3</th>
        <th>Table heading 4</th>
    </tr>
    <tr>
        <td>cell 1</td>
        <td>cell 2</td>
        <td>cell 3</td>
        <td>cell 4</td>
    </tr>
    <tr>
        <td>cell 1</td>
        <td>cell 2</td>
        <td>cell 3</td>
        <td>cell 4</td>
    </tr>
    <tr>
        <td>cell 1</td>
        <td>cell 2</td>
        <td>cell 3</td>
        <td>cell 4</td>
    </tr>
</table>

JSFiddle Demo

【讨论】：