是否有可能将数据库数据回显到2 html表列中,就像循环一样?我不能让它发挥作用。或者我需要一个不同的方法?
我需要这个像回路一样回应到2列<?php echo $row['data']; ?>
这就是我所拥有的:
HTML Table
Col 1 | Col 2
1. aaaa
2. bbbb
3. cccc
4. dddd
5. eeee
6. ffff
7. gggg
8. hhhh
9. iiii
10. jjjj
这就是我要的:
HTML Table
Col 1 | Col 2
1. aaaa 6. ffff
2. bbbb 7. gggg
3. cccc 8. hhhh
4. dddd 9. iiii
5. eeee 10. jjjj
这里的代码用于创建动态列和数据,可能是任何长度,
分成5组并将其作为列值。工作输出如下
<?php
//$row=array(1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20);
$row=array('aaa','bbbb','cccc','ddddd','eeeee','ffff','gggg','hhhh','iiii','jjjjj','kkkk','llll','mmmm','nnnnn','ooooo');
?>
<table style="width:50%">
<?php
echo'<tr>';
$i=0;
foreach ($row as $key => $value) {
if(($key)%5==0)
{
$i++;
echo'<th>Col'.$i.'</th>';
}
$a[$i][]=$value;
}
echo'</tr>';
$forcount=count($a);
$innerforcount=count($a[1]);
for ($j=0; $j <$innerforcount ; $j++) {
echo'<tr>';
for($i=1;$i<=$forcount;$i++)
echo'<td>'.$a[$i][$j].'</td>';
echo"</tr>";
}
?>
</table>
//输出
Col1 Col2 Col3 Col4
1 6 11 16
2 7 12 17
3 8 13 18
4 9 14 19
5 10 15 20
//带文字示例
Col1 Col2 Col3
aaa ffff kkkk
bbbb gggg llll
cccc hhhh mmmm
ddddd iiii nnnnn
eeeee jjjjj ooooo
这绝对是可能的。
你需要做的就是echo
输出交替的类,这可以通过使用一个计数器来完成,当你循环遍历行时,计数器会递增。例如:
<?php
$count = 0;
foreach ($rows as $row) {
$count++; // Increment a counter
if ($count % 2 == 0 && $count != count($rows)) {
echo "<div class='odd'></div>";
}
else {
echo "<div class='even'></div>";
}
}
?>
从这里你可以使用CSS将行设置为两列:
.odd, .even {
width: 50%;
float: left;
}
或者如果您想使用纯CSS执行此操作,则可以使用flexbox。所有你需要的是父母的display: flex
和flex-wrap: wrap
,以及孩子们的flex: 50%
:
.container {
display: flex;
flex-wrap: wrap;
}
.container div {
flex: 50%;
}
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
如果你愿意,还可以通过使用flex-flow: column wrap
和固定的height
来填充左栏:
.container {
display: flex;
flex-flow: column wrap;
height: 100px;
}
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>