仅限 CSS - UL/LI 的破坏规则显示为表格答案

【问题标题】：CSS only - Breaking rules for UL/LI displayed as table仅限 CSS - UL/LI 的破坏规则显示为表格
【发布时间】：2018-01-09 10:19:42
【问题描述】：

问题：对于显示为表格的无序列表是否有任何特定的破坏规则？

问题：我可以防止最后一行脱离倒数第二行，但使用相同的 CSS 规则我无法阻止第二行脱离第一行。

我有以下 HTML 结构：

<ul>
    <li class="wrapperoutside">
        <ul>
            <li class="wrapperinside">
                <p>Heading1</p>
                <p>Heading2</p>
            </li>
            <li class="wrapperinside">
                <p>Part name 1</p>
                <p>Part name 1</p>
            </li>
            <li class="wrapperinside">
                <p>Part name 2</p>
                <p>Part name 2</p>
            </li>
            <li class="wrapperinside">
                <p>Part name 3</p>
                <p>Part name 3</p>
            </li>
            <li class="wrapperinside">
                <p>Part name 4</p>
                <p>Part name 4</p>
            </li>
            <li class="wrapperinside">
                <p>Part name 5</p>
                <p>Part name 5</p>
            </li>
       </ul>
    </li>
</ul>

这是我创建表格的 CSS：

li.wrapperoutside {
    display:table;
}

li.wrapperoutside li.wrapperinside {
    display: table-row;
}

li.wrapperoutside li.wrapperinside p {
    display: table-cell;
}

由于这是作为 PDF 输出发布的（使用 Antenna House 作为格式化程序），我必须关心一些印刷方面的事情，例如防止最后一行脱离倒数第二行。它适用于：

li.wrapperoutside li.wrapperinside:last-child {
    page-break-before: avoid!important;
}

反过来，事情开始变得奇怪：防止第二排脱离第一排：

li.wrapperoutside li.wrapperinside:first-child {
    page-break-after: avoid!important;
}

它不起作用。相反，整个无序列表不再中断。我尝试了不同的选择器：

li.wrapperoutside li.wrapperinside:nth-child(2) {
    page-break-before: avoid!important;
}

或

li.wrapperinside:nth-child(1) + li.wrapperinside:nth-child(2) {
    page-break-after: avoid!important;
}

我尝试了各种选择器方法来使用分页规则，但它不适用于第一行。由于破坏规则正在使用相同的 CSS 规则处理最后一行，这对我来说很奇怪。

关于嵌套 HTML 的背景：我正在使用内容管理系统，无法影响 UL 的 HTML 类。我只能影响 LI 的类，这就是我使用 LI 显示表格的原因...

【问题讨论】：

如果是表格数据，为什么不用表格呢？将其放入列表中在语义上是不正确的，因为您的数据列与其标题不匹配。无论如何，我认为你的问题是 avoid 只有基本支持 - developer.mozilla.org/en-US/docs/Web/CSS/page-break-after
为什么要重新发明轮子？表格数据值得一个表格。
@FacundoCorradini 那将是 display:table-row-group，以模拟 tbody。
@Facundo Corradini：感谢您的想法。你的想法导致了解决方案:)
@Mr Lister：非常感谢您在“li.wrapperoutside ul{}”上的“display:table-row-group”提示。成功了！

标签： html css pdf page-break

【解决方案1】：

问题中的CSS错过了“li.wrapperoutside”和“li.wrapperinside”之间未分类UL的声明：

ul li.wrapperoutside ul {
    display:table-row-group;
}

使用此附加声明，生成的表会中断，因为它应该中断：如果列/页中没有更多空间，生成的表会在其他列/页上中断。它不会在第一行和第二行以及最后一行和倒数第二行之间中断。

【讨论】：

【解决方案2】：

使用:first-of-type 和:last-of-type 伪类：

li.wrapperinside:first-of-type {
    page-break-after: avoid;
}
li.wrapperinside:last-of-type {
    page-break-before: avoid;
}

请参阅https://www.antennahouse.com/product/ahf65/ahf-css6.html#css3-pseudo-clssses、https://www.w3.org/TR/selectors-3/#first-of-type-pseudo 和 https://www.w3.org/TR/selectors-3/#last-of-type-pseudo

【讨论】：