CODEWITHSUNDEEP
phparrays
Mark Bogner
Mark Bogner

Reputation: 471

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).

Upvotes: 12

Views: 436

Answers (2)

MaKR
MaKR

Reputation: 1892

To make something similar without tables (which would allow it to be responsive) you'd do this:

PHP

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 = "<div id='myList'>";
    foreach($listItems as $itemId => $itemName)
    {
        $fullList .= "<span><a href='somePage.php?id={$itemId}'>{$itemName}</a></span>";
    }
    $fullList .= "</div>";
    return $fullList;
}

CSS

#myList, #mylist>* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

#myList {
    display: block;
    width: 100%;
}

#myList>span {
    display: inline-block;
    width: 33%;
}

/* mobile stylesheet */
@media(max-width: 600px) {
    #mylist>span {
        width: 100%;
    }
}

Hint: force mobile devices to use 320px screen width and disable zoom (optional)

<meta name="viewport" content="width=320, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,target-densitydpi=device-dpi, user-scalable=no" />

You can style the spans to look like tables, and columns will all be the same width. The box-sizing property will make it so margins and borders aren't taken into account when calculating element widths. There are no rows so the column widths are not only fluid, but you can shrink down to 1 column for small screens, and even do breakpoints for many sizes of monitors.

Upvotes: 0

Chris
Chris

Reputation: 1128

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.

Upvotes: 10

Related Questions