Mark Bogner Mark Bogner - 1 month ago 10
PHP Question

PHP List array items in a table Rows of 3

I saw a couple of examples of what I'm thinking of, but they aren't quite what I'm looking for... apologies, up front, if this is a duplicate post:

So, I have this function that reads items in an array, that I add to regularly (currently, I have over 50 items in the list).
It puts everything out in a list ( < ul > ).

function getListItems()
{
$listItems = array(
1 => "List Item 1",
2 => "List Item 2",
3 => "List Item 3",
4 => "List Item 4",
5 => "List Item 5",
6 => "List Item 6",
7 => "List Item 7",
8 => "List Item 8",
9 => "List Item 9",
10 => "List Item 10",
11 => "List Item 11",
12 => "List Item 12",
13 => "List Item 13",
14 => "List Item 14",
15 => "List Item 15",
);

$fullList = "<ul>";
foreach($listItems as $itemId=>$itemName)
{
$fullList .= "<li><a href='somePage.php?id=" .$itemId. "'>" .$itemName. "</a></li>";
}
$fullList .= "</ul>";
return $fullList;
}


BUT, what I would like to do, ultimately, is create a way to display it in a table, on screen in rows of three...

Instead of what it is currently doing and just listing out everything that you have to scroll "forever" on.

This is what I currently output to...
(yes, it's somewhat mobile friendly).

Answer

I would use CSS - specifically the column-count property.

Take a look at this guide to see how CSS columns work: https://css-tricks.com/guide-responsive-friendly-css-columns/

Note: This is NOT PHP.

Here is a fiddle showing this working with something like the output of your code.

http://jsfiddle.net/j86fu084/

ul{
  -webkit-column-count: 2;
     -moz-column-count: 2;
          column-count: 2;
}

You could also add a class the UL element and target the CSS styles using that.

Comments