PHP fetched tables column overflow

Question

I have a PHP function looping through database rows and fetching the results in a 3 column grid that is intended to auto populate the fetched results column by column. Essentially I am facing 2 issues on this:

The resulting tables items (fields) are being broken in Chrome while being generally auto-filling the columns as intended. I would like the column break only after any complete table fetched into the previous column.
1. For Firefox the moz-column-fill attribute does not seem to exist and so results are always only displayed in one column. Even in the CSS file it is visible that this moz-column-fill attribute does not seem to be valid which apparently is an ongoing issue for a long time. I would appreciate any suggestion to realize the intended column behaviour in the given scenario.

PHP/HTML code on page (working as intended):

<div name="eventsframe" class="eventstable">
    <table id="events" class="table">


<?php

     while($row=$stmt->fetch()) {
        echo "<tr><td bgcolor='#FFA500'>" .$row["event_name"]."</td></tr>";
        echo "<tr><td>" .$row["event_description"]."</td></tr>";
        echo "<tr><td>" .$row["event_category"]."</td></tr>";
        echo "<tr><td>" .$row["event_venue"]."</td></tr>";
        echo "<tr><td>" .$row["event_location"]."</td></tr>";
     }
} else {
     echo "There are no events listed for the date selected.";
}

?>
    </table>
</div>

The current CSS code:

.eventstable {
    overflow: auto;
    column-count: 3;
    column-gap: 10px;
    column-fill: auto;
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid-column;
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    -moz-column-fill: auto;
}

I have tried a lot of edits on the based on suggestions I found on similar problems on the second point but none of them resulted in the desired behaviour.

Thanks for any suggestions

EDIT

The expected result would be that column breaks only occur after a complete element and before the next one (headline of the events are marked in orange).

Example output (FF):

    <div id="datepicker">   
        <form action="index4.php" method="POST">
            <label>Event date: </label>
            <input type="date" name="selecteddate" value="2018-04-08"/><br /><br />
            <input type="submit" class="button" name="submit" value="Show events"/>
        </form>
        </div>

    <br>




            <div name="eventsframe" class="eventstable">
                <table id="eventsframe" class="table">

            <tr><td bgcolor='#FFA500'>1111111111</td></tr><tr><td>sasss</td></tr><tr><td>Music</td></tr><tr><td>2233</td></tr><tr><td>Dublin 1</td></tr><tr><td bgcolor='#FFA500'>111</td></tr><tr><td>111</td></tr><tr><td>Music</td></tr><tr><td>111</td></tr><tr><td>Dublin 1</td></tr><tr><td bgcolor='#FFA500'>222</td></tr><tr><td>222</td></tr><tr><td>Music</td></tr><tr><td>222</td></tr><tr><td>Dublin 1</td></tr><tr><td bgcolor='#FFA500'>333</td></tr><tr><td>333</td></tr><tr><td>Music</td></tr><tr><td>333</td></tr><tr><td>Dublin 1</td></tr><tr><td bgcolor='#FFA500'>333</td></tr><tr><td>33</td></tr><tr><td>Music</td></tr><tr><td>333</td></tr><tr><td>Dublin 1</td></tr><tr><td bgcolor='#FFA500'>444</td></tr><tr><td>444</td></tr><tr><td>Music</td></tr><tr><td>444</td></tr><tr><td>Dublin 1</td></tr><tr><td bgcolor='#FFA500'>555</td></tr><tr><td>555</td></tr><tr><td>Music</td></tr><tr><td>555</td></tr><tr><td>Dublin 1</td></tr><tr><td bgcolor='#FFA500'>666</td></tr><tr><td>666</td></tr><tr><td>Music</td></tr><tr><td>666</td></tr><tr><td>Dublin 1</td></tr><tr><td bgcolor='#FFA500'>777</td></tr><tr><td>777</td></tr><tr><td>Music</td></tr><tr><td>777</td></tr><tr><td>Dublin 1</td></tr><tr><td bgcolor='#FFA500'>888</td></tr><tr><td>888</td></tr><tr><td>Music</td></tr><tr><td>888</td></tr><tr><td>Dublin 1</td></tr><tr><td bgcolor='#FFA500'>gfgvbfc</td></tr><tr><td>vgvv</td></tr><tr><td>Music</td></tr><tr><td>ugnh</td></tr><tr><td>Dublin 1</td></tr>               </table>
                </div>


    <br>


        <hr />

        <a href="about4.php">About</a>

        <br />

        &copy; JB 2018
    </body>

</html>

Could you provide some example output? (View source on the example page -> Ctrl + A -> edit -> Ctrl + V -> Select pasted content -> Ctrl + K -> save) — wizzwizz4, Apr 08 '18 at 12:03
Can you try to illustrate in a screenshot what the actual / expected result is? — Jakub Judas, Apr 08 '18 at 12:18
Is there an `if` statement above the opening `
` and `` tags? If the line `echo "There are no events listed for the date selected.";` ever runs that will be inside the `
`, but not inside a table cell which isn't valid HTML — Andrew Chart, Apr 08 '18 at 12:53
I think you're trying to display the cells within table rows vertically (i.e. display rows as columns). There are already some answers to this, none of which seem terribly elegant e.g. https://stackoverflow.com/questions/41468762/change-orientation-to-vertical-table-rows-html-css. I think it might be worth you looking into flexbox instead? — Andrew Chart, Apr 08 '18 at 13:15
Thanks Andrew, as for fetching the result per row into a table this is already working as per the above, my main problem is rather ensuring that the column fill property on page ensures that there is no break within a particular table (i.e. row) when fetching the results. I had a look at flexbox earlier and it could be useful, on the other hand I am nearly there with the current solution at least with Chrome and would just need a no break mechanism per element. Any suggestions? — Yo_42, Apr 08 '18 at 13:27

score 0 · Answer 1 · answered Apr 08 '18 at 13:41

Simply surround each block of events with a <tbody>, then use your break-inside: avoid-column; for the <tbody>s.

Example:

.eventstable {
    overflow: auto;
    column-count: 3;
    column-gap: 10px;
    column-fill: auto;
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    -moz-column-fill: auto;
}

.eventstable table tbody {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid-column;
}

<div id="datepicker">   
        <form action="index4.php" method="POST">
            <label>Event date: </label>
            <input type="date" name="selecteddate" value="2018-04-08"/><br /><br />
            <input type="submit" class="button" name="submit" value="Show events"/>
        </form>
        </div>

    <br>




            <div name="eventsframe" class="eventstable">
                <table id="eventsframe" class="table">

            <tbody><tr><td bgcolor='#FFA500'>1111111111</td></tr><tr><td>sasss</td></tr><tr><td>Music</td></tr><tr><td>2233</td></tr><tr><td>Dublin 1</td></tr></tbody><tbody><tr><td bgcolor='#FFA500'>111</td></tr><tr><td>111</td></tr><tr><td>Music</td></tr><tr><td>111</td></tr><tr><td>Dublin 1</td></tr></tbody><tbody><tr><td bgcolor='#FFA500'>222</td></tr><tr><td>222</td></tr><tr><td>Music</td></tr><tr><td>222</td></tr><tr><td>Dublin 1</td></tr></tbody><tbody><tr><td bgcolor='#FFA500'>333</td></tr><tr><td>333</td></tr><tr><td>Music</td></tr><tr><td>333</td></tr><tr><td>Dublin 1</td></tr></tbody><tbody><tr><td bgcolor='#FFA500'>333</td></tr><tr><td>33</td></tr><tr><td>Music</td></tr><tr><td>333</td></tr><tr><td>Dublin 1</td></tr></tbody><tbody><tr><td bgcolor='#FFA500'>444</td></tr><tr><td>444</td></tr><tr><td>Music</td></tr><tr><td>444</td></tr><tr><td>Dublin 1</td></tr></tbody><tbody><tr><td bgcolor='#FFA500'>555</td></tr><tr><td>555</td></tr><tr><td>Music</td></tr><tr><td>555</td></tr><tr><td>Dublin 1</td></tr></tbody><tbody><tr><td bgcolor='#FFA500'>666</td></tr><tr><td>666</td></tr><tr><td>Music</td></tr><tr><td>666</td></tr><tr><td>Dublin 1</td></tr></tbody><tbody><tr><td bgcolor='#FFA500'>777</td></tr><tr><td>777</td></tr><tr><td>Music</td></tr><tr><td>777</td></tr><tr><td>Dublin 1</td></tr></tbody><tbody><tr><td bgcolor='#FFA500'>888</td></tr><tr><td>888</td></tr><tr><td>Music</td></tr><tr><td>888</td></tr><tr><td>Dublin 1</td></tr></tbody><tbody><tr><td bgcolor='#FFA500'>gfgvbfc</td></tr><tr><td>vgvv</td></tr><tr><td>Music</td></tr><tr><td>ugnh</td></tr><tr><td>Dublin 1</td></tr>               </table>
                </div>

Thanks a lot @wizzwizz4 this brings me one step further. However, this only displays correctly when the amounts of rows is divisible by 3. On top of this I have an additional table style that allows row break for longer entries: table { width: 100%; border-collapse: collapse; } table, th, td { border: 1px solid black; } td { max-width: 0; overflow: show; word-break:break-all; word-wrap:break-word; } Once there is a row with a longer entry included the solution breaks as well. Any idea? — Yo_42, Apr 08 '18 at 16:30
@Yo_42 I couldn't get the columns to appear on my browser (Firefox), presumably because there was enough space for it to display in one column with scrolling. I couldn't limit the amount of space because I couldn't work out how to do it, so I don't know how to test this. — wizzwizz4, Apr 08 '18 at 16:56

PHP fetched tables column overflow

1 Answers1