CSS不会在td元素中分页
我不希望打印介质中的td元素内有分页符。 （在打印预览中放大或缩小页面时，它应该永远不会破坏）
<table class = "narr_tr">
<tr>
<td>
<span> Text 1 </span>
<span> Text 2 </span>
</td>
</tr>
.
.
</table>
span元素永远不会超过2，但只能有一个span。
page-break-inside在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; }
但是，它不起作用。
有没有替代方法可以在不使用分页符的情况下执行此操作？ 可以使用元素的offsetHeight在JS中完成吗？如果是这样，我们如何获得高度 当页面放大时？
更新：
这是实际代码
<!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>
红色文字和黑色文字应该在所有缩放级别中一起显示。但是，它在红色文本之后打破了。
如果我的代码在任何地方都不正确，请告诉我。
由于
1 个答案:
答案 0 :(得分：0)
您的范围需要内联阻止，不阻止。
具体来说，css的第一行应如下所示：
.narr_table tr td span
{
display: inline-block;
}
这是在我理解你想要实现的目标的假设下。这是一个fiddle demo。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？