当 <tbody> 为 display:block 时 <tr> 被挤压答案

【问题标题】：<tr> squeezed when <tbody> is display:block当 <tbody> 为 display:block 时 <tr> 被挤压
【发布时间】：2018-02-06 18:55:42
【问题描述】：

我需要在我的 tbody 中添加一个显示块，以使我的 page-break-inside 工作。

当我这样做时，分页符在打印时起作用，但表格的形状会针对一个特定的 tbody 进行修改。

html:

<div class="row section-content">
   <table>
      <tbody class="subsection">
         <tr>
            <th colspan="2">Personal infos</th>
         </tr>
         <tr class="check">
            <td class="control-title">Is licensed</td>
            <td class="check-body control-body">false</td>
         </tr>
         <tr class="text">
            <td class="control-title">First name</td>
            <td class="text-body control-body"> Gc yt?tv</td>
         </tr>
         <tr class="text">
            <td class="control-title">Last name</td>
            <td class="text-body control-body">Bhvug7y</td>
         </tr>
         <tr class="text">
            <td class="control-title">Adress</td>
            <td class="text-body control-body">Guvyb</td>
         </tr>
         <tr class="radioBtn">
            <td class="control-title">Wants to suscribe to monthly discount</td>
            <td class="radio-body control-body">No</td>
         </tr>
         <tr class="number">
            <td class="control-title">Annual household income</td>
            <td class="number-body control-body">10</td>
         </tr>
      </tbody>
      <tbody class="subsection">
         <tr>
            <th colspan="2">Accomodation</th>
         </tr>
         <tr class="gps">
            <td class="control-title">Location</td>
            <td class="gps-body control-body">55.8755037, -4.2547716</td>
         </tr>
         <tr class="number">
            <td class="control-title">Iso reference</td>
            <td class="number-body control-body">15</td>
         </tr>
         <tr class="radioBtn">
            <td class="control-title">Accomodation type</td>
            <td class="radio-body control-body">House</td>
         </tr>
      </tbody>
   </table>
</div>

之前： ]

显示块后：

【问题讨论】：

请将样式添加为代码 sn-p（编辑帖子对话框中的按钮）
将css也添加到代码中
这是意料之中的。当tbody 为display: block 时，tr 不再具有table-row-group 的父级，因此必须围绕它生成匿名table-row-group，并且必须围绕它生成匿名table。然后根据正常的表格渲染规则渲染该匿名表格，因此它收缩包装内容（不再连接到真实的表格元素）。
我正在添加 CSS，比预期的要长
谢谢@Quentin，但是周围有工作吗？？

标签： html css printing html-table page-break

【解决方案1】：

在同一个问题苦苦挣扎了几天后，我发现使用display:table-row-group 非常适合这种情况。

display:block 将断开元素与父表的连接，从而导致此问题。 display:table-row-group 像 <tbody> 一样渲染元素，保持 DOM 正确。

参考：https://www.w3schools.com/jsref/prop_style_display.asp

【讨论】：

这应该是 imo 接受的答案。

【解决方案2】：

我确实遇到了同样的问题，经过全面搜索后，我找到了解决我的问题的方法，即首先向表中添加一个您不想在打印时中断的类，例如 unbreakable 现在添加 css

.unbreakable td{
    width: 100% !important;
}
.unbreakable tr{
    page-break-inside: avoid !important;
}

它对我来说很好，希望它也对你有用... :) 谢谢...

【讨论】：