我对这个感到有些困惑。我有我的代码显示它不会以我希望的格式显示它,我希望它是:
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等等。
答案 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 强>