挤出时显示:阻止

时间:2017-08-29 10:42:53

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

我需要在我的tbody中添加一个显示块,以便让我的分页内部工作。

当我这样做时,分页符适用于打印,但表格的形状会针对一个特定的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>

之前: enter image description here]

显示屏后: enter image description here

2 个答案:

答案 0 :(得分:2)

我确实遇到了同样的问题,经过搜索后我发现了一个解决我的问题的方法,首先在表格中添加一个类,你不想打破像Int这样的打印现在添加css

unbreakable

它对我来说很好,希望它也适合你...... :)谢谢...

答案 1 :(得分:0)

经过几天相同的问题挣扎后,我发现使用display:table-row-group可以很好地适应这种情况。

display:block会断开元素与父表的连接,从而导致此问题。 display:table-row-group将元素呈现为<tbody>,保持DOM正确。

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