Display Result Horizontally - Columns?

I current have a set of results that display a first name like so:
name1
name2
name3
name4
etc…

To save paper space it would be better to have the names spread the page in columns of 5, then starting new row if more than 5 names.

name1 name2 name3 name4 name5
name6
etc…

Here is the code for that table section. I am using PHP Runner so the code may look not quite standard.

 <tr >
        <TD class="data {$fieldclass_first_name}">
              {$xfirst_name_value}
        <span data-itemtype="grid_field" data-field="first_name" data-itemid="grid_field7" data-pageid={$pageid} data-record-id="{$recId}">
              {$first_name_value}
        </span>
        </td>
</tr>

Retrieve all the data from wherever it is stored at into a php array variable. Use array_chunk() to break the data into chunks of the size you want (5 in your case.) Use two nested foreach() loops, to loop over the chunks and then the data within each chunk, to produce the output that you want. The outer foreach loop produces the <tr> and </tr> tags. The inner foreach loop produces the <td>...</td> content.

<style type="text/css">
.wrapper {
    display: grid;
    grid-template-columns: 100px 100px 100px;
}
</style>

<div class="wrapper">
<?php
$data = ['One', 'Two', 'Three', 'Four', 'Five', 'Six'];
foreach ($data as $value) {
    echo "<div>$value</div>";
}
?>
</div>
1 Like

I agree css grid is a very easy way to solve this. Just change the columns to repeat(5, 10em) (or whatever width you want and you’ll have 5 columns.

Sponsor our Newsletter | Privacy Policy | Terms of Service