我需要向我的 tbody 添加一个显示 block ,以使我的分页符内部工作。
当我这样做时,分页符在打印时有效,但表格的形状针对一个特定的 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>
最佳答案
在为同一个问题苦苦挣扎了几天之后,我发现使用 display:table-row-group
非常适合这种情况。
display:block
将断开元素与父表的连接,从而导致此问题。
display:table-row-group
像 <tbody>
一样渲染元素, 保持 DOM 正确。
关于html - <tr> 在显示 <tbody> 时被压缩 :block,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45937046/