Html <；tr>；挤压时<；t车身>；is显示：块

我需要在我的tbody中添加一个显示块，以使我的分页符在内部工作

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

html:

个人信息
被许可
假的
名字
电视
姓
Bhvug7y
地址
古威布
想享受每月的折扣吗
不
家庭年收入
10
住宿
位置
55.8755037, -4.2547716
Iso参考
15
住宿类型
房子

之前： ]

使用显示块后：

---

我确实遇到了同样的问题，在搜索了所有地方后，我找到了解决问题的方法，即首先向表中添加一个类，在打印时不要将其破坏，如

unbreakable

现在添加css

---

它对我很有效，希望对你也有效…：）谢谢……

在与同一问题纠缠了几天后，我发现使用

显示：表行组

非常适合这种情况

display:block

将断开元素与父表的连接，从而导致此问题。

display:table row group

像

一样渲染元素，保持DOM正确

---

参考：

将样式添加为代码段（编辑帖子对话框中的按钮）请将css也添加到预期的代码中。当

tbody

为

display:block

时，

tr

不再有一个父对象是

表行组

，因此必须围绕该父对象生成一个匿名

表行组

，并且必须围绕该父对象生成一个匿名

表

。然后根据正常的表呈现规则呈现匿名表，因此它收缩包装内容（不再连接到真实的表元素）。我正在添加CSS，时间比预期的长Hx@Quentin，但是有工作吗？？

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

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