John Davidson

Message:

So I'm making a localhost site to keep track of my families medications (upwards of 50 of them). I'm working on a page of it to @print out tables for each of us (4 total individuals) for when we fill our med containers each Sunday. All that said, my wife asked me to get the <th> to show on each page (top and bottom).

I did some research and found a great answer to the basic problem: How to use HTML to print header and footer on every printed page of a document?

This is a great answer and I started there with the below table that is echo'd with PHP. I took out the PHP for now, but can add it if someone really needs it.. I use the PHP because the data is coming out of a SQL>Database>Table.

HTML (from PHP echo)

<table>

    <thead>

        <tr>

            <th colspan='15' class='patientHeader'>[Family Member Name]'s Meds</th>

        </tr>

        <tr>

            <th>Drug Names</th>

            <th>Prescriber</th>

            <th>Dose/Pill</th>

            <th>Frequency</th>

            <th>Rx Number</th>

            <th>Time</td>

            <th class='tinyBoxes'>M</th>

            <th class='tinyBoxes'>T</th>

            <th class='tinyBoxes'>W</th>

            <th class='tinyBoxes'>T</th>

            <th class='tinyBoxes'>F</th>

            <th class='tinyBoxes'>S</th>

            <th class='tinyBoxes'>S</th>

            <th class='nf'>Next Fill</th>

        </tr>

    </thead>

<!-- BODY CONTENT -->

    <tfoot>

        <tr>

            <th>Drug Names</th>

            <th>Prescriber</th>

            <th>Dose/Pill</th>

            <th>Frequency</th>

            <th>Rx Number</th>

            <th>Time</td>

            <th class='tinyBoxes'>M</th>

            <th class='tinyBoxes'>T</th>

            <th class='tinyBoxes'>W</th>

            <th class='tinyBoxes'>T</th>

            <th class='tinyBoxes'>F</th>

            <th class='tinyBoxes'>S</th>

            <th class='tinyBoxes'>S</th>

            <th class='nf'>Next Fill</th>

        </tr>

    </tfoot>

</table>

CSS

@media print {



    .menubar,

    h1.viewable,

    #pagewrapper,

    #footer,

    .subbar,

    #screenblock {

        display: none !important;

    }



    body {

        background-color: white;

        color: black;

        font: 8pt Georgia, "Times New Roman", Times, serif;

        line-height: 1.3;

    }



    @page {

        margin: 1cm;

        size: landscape;

    }



    h1 {

        font-size: 24pt;

    }



    h2 {

        font-size: 14pt;

        margin-top: 25px;

    }



    aside h2 {

        font-size: 18pt;

    }



    .body {

        display: block;

        width: 8.5in;

        height: 11in;

        text-align: center;

    }



    /*************************VIEW TABLE STUFF*************************/

    table {

        width: 100%;

        border-spacing: 0px;

        border: 1px sold black;

        page-break-inside: avoid;

        box-decoration-break: clone;

        -webkit-box-decoration-break: clone;

        page-break-after: always;

        margin-bottom: 25px;

    }



    tr {

        page-break-inside: avoid;

    }



    th {

        font-weight: bold;

        border: 1px solid black;

        border-collapse: collapse;

        height: 50px;

        vertical-align: middle;

        text-align:center !important;

    }



    td {

        border: 1px solid black;

        border-collapse: collapse;

        vertical-align: middle;

        text-align: center;

        padding: 5px 0;

    }



    .smallBean {

        font-size: smaller;

        font-style: italic;

        margin: 0px;

        padding: 0px;

        text-align: center;

        font-size: 10pt;

    }



    .tinyBoxes {

        width: 0.5cm;

        height: 0.5cm;

        font-weight: bold;

        vertical-align: middle;

        padding: .1cm;

    }



    .nf {

        width: 100px !important;

    }



    .nf::after {

        font-size: smaller;

        font-style: italic;

        margin: 0px;

        padding: 0px;

        text-align: center;

        content: "\A or \A Refil Needed";

        white-space: pre;

    }



    .onePage {

        page-break-before: always !important;

        page-break-after: always !important;

        page-break-inside: avoid !important;

    }

    .patientHeader {

        font-size: 0.4in;

        font-variant: small-caps;

    }

}

Here's the problem I run in to...

Within the gathering of the data and filling of the table, I use <td rowspan=''> and break down each medicine by when they are taken. When the table breaks on a row with this, the remaining <td rowspan='1'> get overlapped by the <thead>.

IMGUR Image of what the print looks like

**EDIT - ADDITIONAL INFORMATION **

I did chose the <thead> and <tfoot> option from that link I posted because I want them attached to the content and not the page.

To clarify a comment

$am = $row['am'];

$noon = $row['noon'];

$pm = $row['pm'];

$bed = $row['bed'];

$prn = $row['prn'];

$other = $row['other'];



if ($other != 1) {

    if ($am == 1) {

        echo "<td rowspan = '1'>AM</td>";

        $am = 0;

    } elseif ($noon == 1) {

        echo "<td rowspan = '1'>Noon</td>";

        $noon = 0;

    } elseif ($pm == 1) {

        echo "<td rowspan = '1'>PM</td>";

        $pm = 0;

    } elseif ($bed == 1) {

        echo "<td rowspan = '1'>Bed</td>";

        $bed = 0;

    } elseif ($prn == 1) {

        echo "<td rowspan = '1'>PRN</td>";

        $prn = 0;

    }

}



echo "<td tinyBoxes'></div><td class='tonyBoxes'></td><td class='tonyBoxes'></td><td class='tonyBoxes'></td>

        <td class='tonyBoxes'></td><td class='tonyBoxes'></td><td class='tonyBoxes'></td>";

echo "<td rowspan='" . $rows . "' style='width:125px !important'>" . $nextFill . "</td>";

echo "</tr>";



if (($rows > 1) && ($other != 1)) {

    if ($noon == 1) {

        echo "<tr>";

        echo "<td rowspan = '1'>Noon</td>";

        echo "<td tinyBoxes'></div><td class='tonyBoxes'></td><td class='tonyBoxes'></td><td class='tonyBoxes'></td>

            <td class='tonyBoxes'></td><td class='tonyBoxes'></td><td class='tonyBoxes'></td>";

        echo "</tr>";

    }

    if ($pm == 1) {

        echo "<tr>";

        echo "<td rowspan = '1'>PM</td>";

        echo "<td tinyBoxes'></div><td class='tonyBoxes'></td><td class='tonyBoxes'></td><td class='tonyBoxes'></td>

            <td class='tonyBoxes'></td><td class='tonyBoxes'></td><td class='tonyBoxes'></td>";

        echo "</tr>";

    }

    if ($bed == 1) {

        echo "<tr>";

        echo "<td rowspan = '1'>Bed</td>";

        echo "<td tinyBoxes'></div><td class='tonyBoxes'></td><td class='tonyBoxes'></td><td class='tonyBoxes'></td>

            <td class='tonyBoxes'></td><td class='tonyBoxes'></td><td class='tonyBoxes'></td>";

        echo "</tr>";

    }

    if ($prn == 1) {

        echo "<tr>";

        echo "<td rowspan = '1'>PRN</td>";

        echo "<td tinyBoxes'></div><td class='tonyBoxes'></td><td class='tonyBoxes'></td><td class='tonyBoxes'></td>

            <td class='tonyBoxes'></td><td class='tonyBoxes'></td><td class='tonyBoxes'></td>";

        echo "</tr>";

    }

}

The issue falls during these <td rowspan = '1'> tags

---

My Answer:
To prevent the `` and `` from overlapping cells when using ``, you can add empty `` elements in the `` and `` sections to match the number of columns in the table. This will ensure that the header and footer rows have the same number of cells as the body rows with rowspan.

Here is an example of how you can modify your HTML code:

html

[Family Member Name]'s Meds
	Drug Names	Prescriber	Dose/Pill	Frequency	Rx Number	Time	M	T	W	T	F	S	S	Next Fill
	Drug Names	Prescriber	Dose/Pill	Frequency	Rx Number	Time	M	T	W	T	F	S	S	Next Fill

By adding the empty `` elements in the `` and ``, you ensure that the header and footer rows have the same number of cells as the body rows with rowspan, preventing any overlap.