如何阻止页面中断td？

Question

  <table class="question-table">
    <tr>
      <td>
        <div class="question-text">1.
          <p>$153$ + $634$ = ___</p>
        </div>
        <ol type="A">
          <li>$787$</li>
          <li>$456$</li>
          <li>$657$</li>
          <li>$936$</li>
        </ol>
      </td>
      <td class="answer"><small>answer</small></td>
    </tr>
    <tr>
      <td>
        <div class="question-text">2.
          <p>$38$ + $47$ = __</p>
        </div>
        <ol type="A">
          <li>$106$</li>
          <li>$85$</li>
          <li>$96$</li>
          <li>$52$</li>
        </ol>
      </td>
      <td class="answer"><small>answer</small></td>
    </tr>
    <tr>
      <td>
        <div class="question-text">3.
          <p>$32$ + $25$ = __</p>
        </div>
        <ol type="A">
          <li>$76$</li>
          <li>$58$</li>
          <li>$57$</li>
          <li>$24$</li>
        </ol>
      </td>
      <td class="answer"><small>answer</small></td>
    </tr>
</table>

我的CSS是

.question-table {
  border: 0;
  width: 100%;
}

.question-table td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);;
  page-break-inside: avoid;
}

但是当我打印时，它仍然在TR / TD的中间断开：

我做错了什么？

Answer 1

这只是一个想法，但您是否尝试过向<td>标记添加Css？也许给它一定的宽度？

    <style>
       td {
       width:300px;
}
       </style>

Answer 2

尝试

.question-table tr {
  page-break-inside: avoid;
}

更新：与

一起使用

.question-table td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);;
  page-break-inside: avoid;
}