SQL查询echo循环在2 html表列中

问题描述 投票:1回答:2

是否有可能将数据库数据回显到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
php html css pdf dompdf
2个回答
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

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: flexflex-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>
© www.soinside.com 2019 - 2024. All rights reserved.