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

avatar
Yo_42
8 апреля 2018 в 12:02
102
1
0

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

  1. Результирующие элементы таблиц (поля) в 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;
}

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

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

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

The Output in Chrome currently looks like this, column fill works as intended but breaking the elements:

Output in FF looks like this, column fill is not working:

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

Пример вывода (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>
Источник
wizzwizz4
8 апреля 2018 в 12:03
1

Не могли бы вы привести пример вывода? (Просмотреть исходный код на странице примера -> Ctrl + A -> редактировать -> Ctrl + V -> выбрать вставленное содержимое -> Ctrl + K -> сохранить)

Jakub Judas
8 апреля 2018 в 12:18
1

Можете ли вы попытаться проиллюстрировать на скриншоте, каков фактический/ожидаемый результат?

Andrew Chart
8 апреля 2018 в 12:53
0

Есть ли оператор if над открывающими тегами <div> и <table>? Если строка echo "There are no events listed for the date selected."; когда-либо будет запущена, она будет внутри <table>, но не внутри ячейки таблицы, которая не является допустимым HTML

Yo_42
8 апреля 2018 в 12:56
0

Обновлено со скриншотами выше

Andrew Chart
8 апреля 2018 в 13:15
0

Я думаю, вы пытаетесь отображать ячейки в строках таблицы по вертикали (т.е. отображать строки в виде столбцов). На это уже есть несколько ответов, ни один из которых не кажется ужасно элегантным, например. coderhelper.com/questions/41468762/…. Я думаю, может быть, вам стоит взглянуть на flexbox?

Yo_42
8 апреля 2018 в 13:27
0

Спасибо, Эндрю, что касается извлечения результата для каждой строки в таблицу, это уже работает, как указано выше, моя основная проблема скорее заключается в обеспечении того, чтобы свойство заполнения столбца на странице гарантировало отсутствие разрыва в конкретной таблице (т.е. строке), когда получение результатов. Ранее я просматривал flexbox, и это может быть полезно, с другой стороны, я почти достиг текущего решения, по крайней мере, с Chrome, и мне просто нужен механизм без разрыва для каждого элемента. Какие-либо предложения?

Ответы (1)

avatar
wizzwizz4
8 апреля 2018 в 13:41
0

Просто окружите каждый блок событий <tbody>, затем используйте break-inside: avoid-column; для <tbody>s.

Пример:

.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>
Yo_42
8 апреля 2018 в 16:30
0

Большое спасибо @wizzwizz4, это продвинуло меня на один шаг вперед. Однако это отображается правильно только тогда, когда количество строк делится на 3. Кроме того, у меня есть дополнительный стиль таблицы, который позволяет разрывать строки для более длинных записей: table { width: 100%; граница коллапса: коллапс; } table, th, td { border: 1px сплошной черный; } тд { максимальная ширина: 0; переполнение: показать; слово-разрыв: разбить-все; перенос слов:разрывное слово; } Как только появляется строка с более длинной записью, решение также прерывается. Есть идеи?

wizzwizz4
8 апреля 2018 в 16:56
0

@Yo_42 Yo_42 Я не мог отобразить столбцы в своем браузере (Firefox), предположительно потому, что было достаточно места для отображения в одном столбце с прокруткой. Я не мог ограничить количество места, потому что я не мог понять, как это сделать, поэтому я не знаю, как это проверить.