css < tr>显示时挤压< tbody>：块

9fkzdhlc 于 2023-07-01 发布在其他

关注(0)|答案(3)|浏览(136)

我需要添加一个显示块到我的tbody，以使我的分页内工作。
当我这样做时，分页符在打印时起作用，但是表格的形状被修改为一个特定的tbody。
联系我们

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

之前：

]
带显示块后：

css

来源：https://stackoverflow.com/questions/45937046/tr-squeezed-when-tbody-is-displayblock

3条答案

按热度按时间

xxe27gdn1#

在与同一问题斗争了几天之后，我发现使用display:table-row-group非常适合这种情况。
display:block将断开元素与父表的连接，从而导致此问题。display:table-row-group像<tbody>一样呈现元素，保持DOM正确。
参考：https://www.w3schools.com/jsref/prop_style_display.asp

赞(0）回复(0）举报 2023-07-01

icnyk63a2#

我也有同样的问题，经过搜索，我找到了一个解决方案，我的问题是，首先添加一个类表，你不想打破，而打印像unbreakable现在添加css。

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

对我来说很好，希望对你也一样...：）Thanks...

赞(0）回复(0）举报 2023-07-01

eqfvzcg83#

看起来display:table-row-group将保持DOM的正确性，但scroll属性不能与它一起工作。
有没有其他方法可以让一个表既能滚动又能保持不可破？

赞(0）回复(0）举报 2023-07-01

我来回答

css < tr>显示时挤压< tbody>：块

3条答案

相关问题

热门标签

最新问答