Переполнение столбца извлекаемых таблиц PHP

Question

У меня есть функция PHP, перебирающая строки базы данных и извлекающая результаты в сетке из 3 столбцов, которая предназначена для автоматического заполнения извлеченных результатов столбец за столбцом. По сути, я столкнулся с двумя проблемами:

Результирующие элементы таблиц (поля) в Chrome разбиваются, в то время как столбцы обычно заполняются автоматически, как предполагалось. Я хотел бы, чтобы столбец разрывался только после того, как любая полная таблица была извлечена в предыдущий столбец.
1. Для Firefox атрибут moz-column-fill не существует, поэтому результаты всегда отображаются только в одном столбце. Даже в файле CSS видно, что этот атрибут moz-column-fill недействителен, что, по-видимому, является постоянной проблемой в течение длительного времени. Я был бы признателен за любое предложение реализовать предполагаемое поведение столбца в данном сценарии.

Код PHP/HTML на странице (работает как положено):

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

Текущий код CSS:

.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;
}

Я испробовал много правок на основе предложений, которые я нашел по аналогичным проблемам во втором пункте, но ни одно из них не привело к желаемому поведению.

Спасибо за любые предложения

РЕДАКТИРОВАТЬ

Ожидаемым результатом будет то, что разрывы столбцов будут происходить только после полного элемента и перед следующим (заголовки событий отмечены оранжевым цветом).

Пример вывода (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>

Переполнение столбца извлекаемых таблиц PHP

Ответы (1)