html - How can I stop the page from breaking mid td? -
<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>
my css is
.question-table { border: 0; width: 100%; } .question-table td { border-bottom: 1px solid rgba(0, 0, 0, 0.1);; page-break-inside: avoid; }
but when print, still breaks in middle of tr / td
:
what doing incorrectly?
this thought, have possibly tried adding css <td>
tag? maybe giving width?
<style> td { width:300px; } </style>
Comments
Post a Comment