Reputation: 173
I made tables using foreach loop, it looks like this
How do i split it into two column like this:
Upvotes: 0
Views: 2592
Reputation: 12209
Print it out simply in PHP:
<div class="grid">
<?php
foreach($tables as $table){
echo "<div>".$table."</div>";
}
?>
</div>
Yields:
<div class="grid">
<div>Table Code</div>
<div>Table Code</div>
<div>Table Code</div>
<div>Table Code</div>
</div>
Then style with CSS Grid:
.grid{
display: grid;
grid-template-columns: 1fr 1fr;
}
.grid > div{
border: blue 3px dashed;
padding: 25px;
}
<div class="grid">
<div>Table Code</div>
<div>Table Code</div>
<div>Table Code</div>
<div>Table Code</div>
</div>
Upvotes: 2
Reputation: 12039
With the help of for
loop, increasing by 2. This also reduce the number of iteration.
PHP
$arr = range(1, 10);
echo '<table>';
for ($i = 0; $i < count($arr); $i += 2)
{
echo '<tr>';
echo "<td>{$arr[$i]}</td>";
echo "<td>{$arr[$i + 1]}</td>";
echo '</tr>';
}
echo '</table>';
CSS:
td {
border: 2px solid #000;
}
Upvotes: 1
Reputation: 42314
Use modulo to conditionally split your elements into two different groups:
<?php
for ($i = 0; $i < 10; $i++) {
if ($i % 2 == 0) {
echo "<div class='left'>$i</div>";
} else {
echo "<div class='right'>$i</div>";
}
}
?>
And then use CSS to float
the columns next to each other:
.left {
float: left;
}
.right {
float: right;
}
.left, .right {
width: 50%;
}
Upvotes: 2