CSS do not page break inside a td element

Question

I do not want a page break inside the td element in the print media. (It should never break even when the page is zoomed in or out in the print preview)

<table class = "narr_tr">
    <tr>
       <td>
          <span> Text 1 </span>
          <span> Text 2 </span>
       </td>
    </tr>
    .
    .
</table>

The span elements would never be more than 2, there can only be one span though.

page-break-inside would not work in IE ( under 8 ), so I cannot use that

I tried

.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; }

but, it is not working.

Is there an alternative of doing this without using page-break ? Can this be done in JS using offsetHeight of the element ? If so, how do we get the height when the page is zoomed in ?

UPDATE:

Here is the actual code

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

Print preview of the above content

The red text and the black text should go together in all the zoom levels. But, it is breaking after the red text.

Let me know if my code is incorrect anywhere.

Thanks

Could you provide a visual example of what you are trying to achieve and prevent? Thanks. — hungerstar, Sep 16 '14 at 20:00
@hungerstar Sure. I have updated the question with the snapshot of the error and the actual code. — Kidambi Manoj, Sep 18 '14 at 15:11

score 0 · Answer 1 · answered Oct 03 '14 at 17:49

0

Your span needs to be inline-block, not block.

Specifically, the first line of css should look like this:

.narr_table tr td span
    {
       display: inline-block; 
    }

This is under the assumption I understood what you were trying to achieve. Here's a fiddle demo.

answered Oct 03 '14 at 17:49

Perry

53
1
6

This is not what I asked for. I do not want the span elements to be on the same line. So, it either has to be a block element or we inject a line break after it. – Kidambi Manoj Oct 03 '14 at 19:53
@KidambiManoj Gotcha. So you just want them to be on individual lines and to look proper even when zoomed in? If that's the case, you can just change all of the spans to divs. The only difference is that the former is inline and the latter is block. For zooming issues, I would check out this thread on [zoom detection across browsers](http://stackoverflow.com/questions/1713771/how-to-detect-page-zoom-level-in-all-modern-browsers/5078596#5078596) – Perry Oct 07 '14 at 14:13
Yes, they need to be on individual lines, but the point is to prevent page-break between them in the print mode. The zoom level you talked about should actually work in the print mode. It is not working even if we ignore the zoom levels – Kidambi Manoj Oct 07 '14 at 16:05
@KidambiManoj Okay, I'm understanding the problem more. Sorry, I was assuming HTML page-break, not print page-break. In this case, there are a couple of things I can think of right off the bat. One is to make two tables, 50% width, that sit next to each other. If you want it to still look like one table in the browser, you can use JavaScript to format it depending on if it's being printed or not (such as when a "print" button is clicked). The other thing would be to just make the print smaller, which I don't think you would want to do because you want it to be legible. – Perry Oct 07 '14 at 16:18
I don't think the tables with 50%width would solve the problem here as I want the text to be displayed in two separate lines. Here's my task, you have a bunch of medications ( with medication name in one line and dosage in the next line). You do not want the page-break in the print mode in between the medication and the dosage no matter how big the dosage is(definitely not bigger than one page). Just tell the print mode using css or JS, to push the content to the next page if there is chance of breaking in the middle. Here's the hardest part: should work from IE-7 ;) – Kidambi Manoj Oct 07 '14 at 17:09
Take a look at [this thread on Microsoft](http://social.msdn.microsoft.com/Forums/ie/en-US/fe523ec6-2f01-41df-a31d-9ba93f21787b/ie7-and-pagebreakbefore?forum=iewebdevelopment). I think the answer to your question comes down to doing inline styles instead of declaring them in the head. The 4th, 5th, and 6th comments from the top should be what you need. – Perry Oct 07 '14 at 17:52
I tried it just not but it did not work. Thanks for the thread anyway. Moreover, if we certainly know where to break it, we can specify the page-break-after/before as in the example you sent. But, in my case, we do not know where the page will break. I have applied the css as above for each span element but didnt work. – Kidambi Manoj Oct 07 '14 at 18:25
Dang it. I'm just as stumped as you are then :( This is why everyone needs should just use Chrome. Or at least migrate to Windows 7, minimum :P – Perry Oct 07 '14 at 18:57

CSS do not page break inside a td element

1 Answers1