PHP 获取的表列溢出

Question

我有一个 PHP 函数循环遍历数据库行并在 3 列网格中获取结果，该网格旨在逐列自动填充获取的结果。基本上我在这方面面临 2 个问题:

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

根据我在第二点上发现的类似问题的建议，我尝试了很多编辑，但没有一个导致预期的行为。

谢谢你的建议

编辑

预期的结果是分栏符只出现在一个完整的元素之后和下一个元素之前(事件的标题用橙色标记)。

示例输出(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>

Answer 1

简单地用 <tbody> 包围每个事件 block , 然后使用你的 break-inside: avoid-column;对于 <tbody>

例子:

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