2
Я не хочу, чтобы разрыв страницы внутри элемента td в печатном носителе. (Он никогда не должен нарушать даже когда страница сжата или растянута в предварительном просмотре печати)CSS не разбивает страницу внутри элемента td
<table class = "narr_tr">
<tr>
<td>
<span> Text 1 </span>
<span> Text 2 </span>
</td>
</tr>
.
.
</table>
Элементы пролетных никогда не будет больше, чем 2, может быть только один пролет, хотя.
страниц обкатки внутри не будет работать в IE (до 8 лет), поэтому я не могу использовать, что
Я попытался
.narr_tr tr td span { display: block; }
.narr_tr tr td span:first-child { page-break-after: avoid; }
.narr_tr tr td span:first-child + span { page-break-before: avoid; }
, но он не работает.
Есть ли альтернатива этому без использования разрыва страницы? Можно ли это сделать в JS, используя offsetHeight элемента? Если да, то как мы можем получить высоту , когда страница увеличена?
UPDATE:
Вот фактический код
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>Untitled Page</title>
<style type="text/css" media="print">
.narr_table tr td span
{
display: block;
}
.narr_table tr td br
{
display: none;
}
.narr_table tr td span:first-child
{
color: Red;
page-break-after: avoid;
}
.narr_table tr td span:first-child + br + div
{
page-break-before: avoid;
color: Blue;
}
</style>
</head>
<body>
<table class="narr_table">
<tbody>
<tr class="narr_tr">
<td>
<span id="MEDPROD5057943812" class="Bold">Additive C1sj</span>
</td>
</tr>
<tr class="narr_tr">
<td>
<span id="MEDPROD5057936097" class="Bold">aspirin</span>
<br>
<span id="MEDSIG5057936097">, 125 mg, twice daily</span>
</td>
</tr>
<tr class="narr_tr">
<td>
<span id="MEDPROD5057935161" class="Bold">aspirin</span>
</td>
</tr>
<tr class="narr_tr">
<td>
<span id="MEDPROD5058046867" class="Bold">aspirin</span>
<br>
<span id="MEDSIG5058046867">325 mg, orally, Daily</span>
</td>
</tr>
<tr class="narr_tr">
<td>
<span id="MEDPROD189600670" class="Bold">aspirin</span>
<br>
<span id="MEDSIG189600670">600 mg, twice daily, As Needed, anxiety</span>
</td>
</tr>
<tr class="narr_tr">
<td>
<span id="MEDPROD5057940142" class="Bold">aspirin</span>
<br>
<span id="MEDSIG5057940142">1,300 mg, orally, twice daily</span>
</td>
</tr>
<tr class="narr_tr">
<td>
<span id="MEDPROD189877590" class="Bold">aspirin</span>
<br>
<span id="MEDSIG189877590">100 mg, orally, Four times per day, Refills: 0</span>
<br>
Ordering provider: Ragan , Carol
</td>
</tr>
<tr class="narr_tr">
<td>
<span id="MEDPROD5057938523" class="Bold">Aspirin + Metoclopramide</span>
<br>
<span id="MEDSIG5057938523">, 01_SR_BID_0100_0600</span>
</td>
</tr>
<tr class="narr_tr">
<td>
<span id="MEDPROD5057940434" class="Bold">aspirin-caffeine</span>
<br>
<span id="MEDSIG5057940434">, orally, Every 6 Hours</span>
</td>
</tr>
<tr class="narr_tr">
<td>
<span id="MEDPROD5057937375" class="Bold">aspirin-codeine</span>
<br>
<span id="MEDSIG5057937375">1 tab(s), orally, Every 6 Hours, 2 day(s), As Needed, 1
reason</span>
</td>
</tr>
<tr class="narr_tr">
<td>
<span id="MEDPROD5057939839" class="Bold">aspirin-hydrocodone</span>
<br>
<span id="MEDSIG5057939839">1 tab(s), orally, Every 6 Hours, 5 day(s)</span>
</td>
</tr>
<tr class="narr_tr">
<td>
<span id="MEDPROD5057937319" class="Bold">aspirin-meprobamate</span>
</td>
</tr>
<tr class="narr_tr">
<td>
<span id="MEDPROD5057936841" class="Bold">aspirin-oxycodone</span>
<br>
<span id="MEDSIG5057936841">, orally, (not to exceed 12 tablets/day), 1 day(s), Refills:
0</span>
</td>
</tr>
<tr class="narr_tr">
<td>
<span id="MEDPROD5058046894" class="Bold">aspirin-oxycodone</span>
<br>
<span id="MEDSIG5058046894">, orally, Refills: 0</span>
</td>
</tr>
<tr class="narr_tr">
<td>
<span id="MEDPROD5057943023" class="Bold">aspirin-oxycodone</span>
<br>
<span id="MEDSIG5057943023">, orally, Every 6 Hours, Refills: 0</span>
</td>
</tr>
<tr class="narr_tr">
<td>
<span id="MEDPROD5057937075" class="Bold">aspirin-pravastatin</span>
<br>
<span id="MEDSIG5057937075">, 125, 1ROUTE, 01RS_TID_0600_1000_1400_1800_2200</span>
</td>
</tr>
<tr class="narr_tr">
<td>
<span id="MEDPROD5057938046" class="Bold">aspirin-pravastatin</span>
<br>
<span id="MEDSIG5057938046">, As Needed, 3 reason, Refills: 0</span>
</td>
</tr>
<tr class="narr_tr">
<td>
<span id="MEDPROD5058046897" class="Bold">Ca carbonate/Mg hydroxide/simethicone</span>
</td>
</tr>
<tr class="narr_tr">
<td>
<span id="MEDPROD5057943870" class="Bold">captopril-RTT</span>
<br>
<span id="MEDSIG5057943870">, orally, Refills: 0</span>
</td>
</tr>
<tr class="narr_tr">
<td>
<span id="MEDPROD190192586" class="Bold">Dextrose 5% in water 1,000 mL Every Bag</span>
<br>
<span id="MEDSIG190192586">1000 mL, 100 mL/hr, Intravenous</span>
</td>
</tr>
<tr class="narr_tr">
<td>
<span id="MEDPROD5057943237" class="Bold">docusate (primary)</span>
</td>
</tr>
<tr class="narr_tr">
<td>
<span id="MEDPROD5058046895" class="Bold">epinephrine-lidocaine</span>
</td>
</tr>
<tr class="narr_tr">
<td>
<span id="MEDPROD189571670" class="Bold">ibuprofen</span>
<br>
<span id="MEDSIG189571670">300 mg, Every 4 hours10</span>
</td>
</tr>
<tr class="narr_tr">
<td>
<span id="MEDPROD5058046896" class="Bold">methotrexate</span>
<br>
<span id="MEDSIG5058046896">3 tab(s), orally</span>
</td>
</tr>
<tr class="narr_tr">
<td>
<span id="MEDPROD189801420" class="Bold">milk thistle</span>
<br>
<span id="MEDSIG189801420">20 dL, Anterior Chamber, Seven times a day</span>
</td>
</tr>
<tr class="narr_tr">
<td>
<span id="MEDPROD190192816" class="Bold">morphine 15 mL Every Bag + Dextrose 5% in water
1,000 mL Every Bag</span>
<br>
<span id="MEDSIG190192816">1000 mL, 100 mL/hr, Intravenous</span>
</td>
</tr>
<tr class="narr_tr">
<td>
<span id="MEDPROD5058046893" class="Bold">Paracetamol + Sodium salicylate</span>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Красный текст и черный текст должен идти вместе на всех уровнях масштабирования. Но он ломается после красного текста.
Сообщите мне, если мой код некорректен.
Благодаря
Не могли бы вы представить наглядный пример того, чего вы пытаетесь достичь и предотвратить? Благодарю. – hungerstar
@hungerstar Конечно. Я обновил вопрос с моментальным снимком ошибки и фактического кода. –