是否可以像循环一样将数据库数据回显到2个html表列中?我不能使它工作。还是我需要其他方法?
我需要它像循环一样回显到两列<?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
答案 0 :(得分:1)
这是绝对可能的。
您需要做的就是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>
答案 1 :(得分:1)
这里的代码用于创建动态列和数据,其长度可以是任意的
分为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