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>

Answer 1

只需使用<tbody>围绕每个事件块，然后将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>

PHP获取表列溢出

1 个答案: