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

时间:2014-02-13 10:28:39

标签: php css formatting css-tables

我对这个感到有些困惑。我有我的代码显示它不会以我希望的格式显示它,我希望它是:

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等等。

1 个答案:

答案 0 :(得分:0)

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

<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