Search code examples
phphtmlcsshtml-table

Printed Table within a Table's cells not lining up

I'm making a localhost website that keeps track of my family's medications as well as has weekly print out sheets that we use to make sure all the meds to in all the proper containers, and if any are missing, we know what to pick up at the pharmacy...

I am using @media print { @page {size: letter}...} to make sure the printed pages are set the right direction (vs. landscape).

The problem I'm running in to is aesthetics...

Since not every pill is taken at every "time" of the day, I have the forms only list the rows (designated in the picture below as "AM NOON PM BED PRN NOTES") that need to be used for that specific med. Originally I did this with using rowspan='$rows' which calculated out great and worked fine - until I printed it. It would break the rows at PM or Bed because according to the system, it was a new <tr> and could page-break-after.

I've since started using a table inside the main table

echo "<table id='printRxTable'>
<thead>
    <tr><th class='patientHeader' colspan='14'>$patient</th></tr>
    <tr><th>Drug Names</th><th>Prescriber</th><th>Dose/Pill</th><th>Directions</th><th style='width:100px !important'>Rx Number</th>
<th class='tinyBoxes1'>TOD</th><th class='tinyBoxes'>M</th><th class='tinyBoxes'>Tu</th><th class='tinyBoxes'>W</th><th class='tinyBoxes'>Th</th>
<th class='tinyBoxes'>F</th><th class='tinyBoxes'>Sa</th><th class='tinyBoxes2'>Su</th><th class='nf'>Next Fill</th></tr>
</thead>";

<!-- Skip all the content adding part -->

echo "<td class='noPad' colspan='8'>"; /**THIS IS THE CONTAINING <td> FOR THE TABLE IN THE TABLE**/

echo "<table id='tIt' class='tItPrep'>";
if ($tod['am'] == 1) {
    echo "<tr><td class='tinyBoxes1'>am</td><td class='tinyBoxes'></td><td class='tinyBoxes'></td><td class='tinyBoxes'></td>
            <td class='tinyBoxes'></td><td class='tinyBoxes'></td><td class='tinyBoxes'></td><td class='tinyBoxes2'></td></tr>";
    $tod['am'] = 0;
}
if ($tod['noon'] == 1) {
    echo "<tr><td class='tinyBoxes1'>noon</td><td class='tinyBoxes'></td><td class='tinyBoxes'></td><td class='tinyBoxes'></td>
            <td class='tinyBoxes'></td><td class='tinyBoxes'></td><td class='tinyBoxes'></td><td class='tinyBoxes2'></td></tr>";
    $tod['noon'] = 0;
}
if ($tod['pm'] == 1) {
    echo "<tr><td class='tinyBoxes1'>pm</td><td class='tinyBoxes'></td><td class='tinyBoxes'></td><td class='tinyBoxes'></td>
            <td class='tinyBoxes'></td><td class='tinyBoxes'></td><td class='tinyBoxes'></td><td class='tinyBoxes2'></td></tr>";
    $tod['pm'] = 0;
}
if ($tod['bed'] == 1) {
    echo "<tr><td class='tinyBoxes1'>bed</td><td class='tinyBoxes'></td><td class='tinyBoxes'></td><td class='tinyBoxes'></td>
            <td class='tinyBoxes'></td><td class='tinyBoxes'></td><td class='tinyBoxes'></td><td class='tinyBoxes2'></td></tr>";
    $tod['bed'] = 0;
}
if ($tod['prn'] == 1) {
    echo "<tr><td class='tinyBoxes1'>prn</td><td class='tinyBoxes'></td><td class='tinyBoxes'></td><td class='tinyBoxes'></td>
            <td class='tinyBoxes'></td><td class='tinyBoxes'></td><td class='tinyBoxes'></td><td class='tinyBoxes2'></td></tr>";
    $tod['prn'] = 0;
}
echo "<tr><td class='tinyBoxes1 other'>Notes</td><td class='other' colspan='7'>$notes</td></tr>";

echo "</table>";

With CSS

@media print {
    @page {
        size: letter;
    }

    body {
        -webkit-print-color-adjust: exact !important;
        width: 8.5in;
    }


    .menubar,
    h1.viewable,
    #pagewrapper,
    #footer,
    .subbar,
    #screenblock {
        display: none !important;
    }

    #pp {
        display: block !important;
    }

    body {
        background-color: white;
        color: black;
        font: 8pt Georgia, "Times New Roman", Times, serif;
    }

    /*************BASIC TABLE STUFF*************/

    table {
        max-width: 8.5in;
        max-height: 11in;
        margin: 0.25in;
        border-collapse: collapse;
    }

    table * {
        text-align: center;
        vertical-align: middle;
        border-spacing: 0;
    }

    table>tr * {
        page-break-inside: avoid;
        border: 1px solid black;
    }

    table>tr {
        break-inside: avoid;
    }

    td,
    th {
        border: 1px solid black;
        border-collapse: collapse;
        padding: 10px;
        white-space: nowrap
    }

    th {
        font-variant: small-caps;
        padding: 5pt;
    }

    /*************CLASS TABLE STUFF*************/

    #printRxTable {
        width: 8in;
        height: 10.5in;
        margin: 0.25in;
    }

    td.noPad {
        padding: 0px !important;
        margin: 0px !important;
    }

    #tIt {
        width: 100%;
        border-collapse: collapse;
        margin: 0px;
        padding: 0px;
        display: table;
    }

    table#tIt * {
        border-collapse: collapse;
        padding: 0px;
        margin: 0px;
        height: 8mm;
        width: 8mm;
    }

    .tinyBoxes,
    .tinyBoxes1,
    .tinyBoxes2 {
        font-weight: bold;
        vertical-align: middle;
        padding: 0mm 1mm;
        font-variant: small-caps;
    }

    .tinyBoxes1 {
        border-left: none !important;
    }

    .tinyBoxes2 {
        border-right: none !important;
    }

    #tIt>tbody>tr:first-child>td {
        border-top: none !important;
    }

    #tIt>tbody>tr>td.other {
        border: none;
        word-wrap: normal !important;
    }

    #tIt>tbody>tr>td.tinyBoxes1.other {
        border-right: 1px solid black;
    }

    .prime {
        font-weight: bold;
        margin: 0px;
        padding: 5px;
        text-align: center;
    }

    .smallBean {
        font-weight: normal !important;
        font-style: italic;
        margin: 0px;
        padding: 0px;
        text-align: center;
        font-size: 8pt;
        border: none !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.3in;
        font-variant: small-caps;
    }
/** SOME OTHER STUFF NOT RELATED TO THIS HERE**/
}

For whatever reason, I cannot get the cells (<td class='tinyBoxes'> or 1 or 2) to all line up.

I've set their widths (both in the <th> and <td>) but they keep shifting whenever something is in notes AKA <td class='other'>

Specific CSS to .other:

.tinyBoxes,
    .tinyBoxes1,
    .tinyBoxes2 {
    font-weight: bold;
    vertical-align: middle;
    padding: 0mm 1mm;
    font-variant: small-caps;
}

.tinyBoxes1 {
    border-left: none !important;
}
#tIt>tbody>tr>td.other {
    border: none;
    word-wrap: normal !important;
}

#tIt>tbody>tr>td.tinyBoxes1.other {
    border-right: 1px solid black;
}

Any help getting these to keep their alignment would be appreciated

Snippet of page 2

I tried adding to the notes of one of the meds and here's what it does..

Picture of Iron with expanded 'fake' definition

I added table-layout: fixed; and it comes close...

Every now and then a random row is 1px off at the TOD column

Solution

  • I ended up deleting the whole thing and starting from scratch - it actually worked though, so I guess we're good...

    echo "<table id='mainMedList'><thead><tr><th colspan='100' style='text-align:center;font-weight:bold;font-variant:small-caps;font-size:1cm'>$patient</th></tr><tr>";
    echo "<th>Drug Name<div class='smallBean'>Alt Name</div></th><th>Prov</th><th>Dose/Pill</th><th>Q/F</th><th class='rx'>Rx Number</th><th class='tiny'>TOD</th>";
    echo "<th class='tiny'>M</th><th class='tiny'>T</th><th class='tiny'>W</th><th class='tiny'>T</th><th class='tiny'>F</th>";
    echo "<th class='tiny'>S</th><th class='tiny'>S</th><th class='nf'>Next Fill</tr></tr></thead>";

// SOME API DATA STUFF THAT'S NOT REALLY RELIVENT GOES HERE

echo "<tbody class='trg'>";
            echo "<tr>";
            echo "<td rowspan='$rows'>$rxPrimeName<div class='smallBean'>$rxAltName</div></td>";
            echo "<td rowspan='$rows'>$prescriber</td>";
            echo "<td rowspan='$rows'>$dpp $dppMetric</td>";
            echo "<td rowspan='$rows'>" . $frequency . "x&nbsp;$freqMetric</td>";
            echo "<td rowspan='$rows' class='rx'>$rxID</td>";

            /*********TABLE IN TABLE*********/
            echo "<td colspan='8' class='tItHolder'><table id='tIt'>";
            if ($tod['am'] == 1) {
                echo "<tr><td>am</td><td class='tinyBoxes'></td><td class='tinyBoxes'></td><td class='tinyBoxes'></td>
                        <td class='tinyBoxes'></td><td class='tinyBoxes'></td><td class='tinyBoxes'></td><td></td></tr>";
                $tod['am'] = 0;
            }
            if ($tod['noon'] == 1) {
                echo "<tr><td>noon</td><td class='tinyBoxes'></td><td class='tinyBoxes'></td><td class='tinyBoxes'></td>
                        <td class='tinyBoxes'></td><td class='tinyBoxes'></td><td class='tinyBoxes'></td><td></td></tr>";
                $tod['noon'] = 0;
            }
            if ($tod['pm'] == 1) {
                echo "<tr><td>pm</td><td class='tinyBoxes'></td><td class='tinyBoxes'></td><td class='tinyBoxes'></td>
                        <td class='tinyBoxes'></td><td class='tinyBoxes'></td><td class='tinyBoxes'></td><td></td></tr>";
                $tod['pm'] = 0;
            }
            if ($tod['bed'] == 1) {
                echo "<tr><td>bed</td><td class='tinyBoxes'></td><td class='tinyBoxes'></td><td class='tinyBoxes'></td>
                        <td class='tinyBoxes'></td><td class='tinyBoxes'></td><td class='tinyBoxes'></td><td></td></tr>";
                $tod['bed'] = 0;
            }
            if ($tod['prn'] == 1) {
                echo "<tr><td>prn</td><td class='tinyBoxes'></td><td class='tinyBoxes'></td><td class='tinyBoxes'></td>
                        <td class='tinyBoxes'></td><td class='tinyBoxes'></td><td class='tinyBoxes'></td><td></td></tr>";
                $tod['prn'] = 0;
            }
            if ($other == 1) {
                echo "<tr><td>Notes</td><td class='notes' colspan='7'>$notes</td></tr>";
            }
            echo "</tr>";
            echo "</table></td>";
            /*********END TABLE IN TABLE*********/
            echo "<td rowspan='$rows'>$nextFill</td>";
            echo "</tr>";

            echo "</tbody>";
        }
        echo "</table>";

    With CSS

    table {
        max-width: 8.5in;
        margin: 0.25in;
        border-collapse: collapse;
    }

    table * {
        text-align: center;
        vertical-align: middle;
        border-spacing: 0;
        border-collapse: collapse;
        padding: 10px;
    }

    th {
        font-variant: small-caps;
        padding: 5pt;
    }

    /*************CLASS TABLE STUFF*************/
    /**************MAIN MEDS STUFF**************/

    table#mainMedList {
        break-inside: avoid !important;
        break-before: page !important;
        break-after: page !important;
    }

    table#mainMedList,
    table#tIt {
        margin: 0px;
        padding: 0px;
        height: 10mm;
        border: none;
        table-layout: fixed;
    }

    table#mainMedList *,
    table#tIt * {
        width: fit-content;
    }

    table#mainMedList td.tItHolder {
        padding: 0px;
        margin: 0px;
        width: 2.5in !important;
    }

    table#mainMedList th,
    table#mainMedList td,
    table#tIt th,
    table#tIt td {
        margin: 0px;
        padding: 2mm;
    }

    table#mainMedList th,
    table#mainMedList td {
        border: 1px solid black;
    }

    table#mainMedList th.rx,
    table#mainMedList td.rx {
        width: 1in !important;
        white-space: nowrap;
    }

    table#mainMedList>thead>tr>th.tiny {
        width: 0.34375in;
        padding: 2mm;
    }

    table#mainMedList>tbody>tr>td>table#tIt * {
        margin: 0px;
        padding: 0px;
        border: none;
    }

    table#mainMedList>tbody>tr>td>table#tIt>tbody>tr * {
        width: 0.34375in;
        padding: 2mm;
        font-variant: small-caps;
    }

    table#mainMedList>tbody>tr>td>table#tIt>tbody>tr>td {
        border: 1px solid black;
    }

    table#mainMedList>tbody>tr>td>table#tIt>tbody>tr:first-child * {
        border-top: none;
    }

    table#mainMedList>tbody>tr>td>table#tIt>tbody>tr:last-child * {
        border-bottom: none;
    }

    table#mainMedList>tbody>tr>td>table#tIt>tbody>tr>td:first-child {
        border-left: none;
    }

    table#mainMedList>tbody>tr>td>table#tIt>tbody>tr>td:last-child {
        border-right: none;
    }

    table#mainMedList th.nf::after {
        white-space: pre;
        content: "\A or \A Refil Needed";
        font-style: italic;
        font-size: smaller;
    }

    table#mainMedList th {
        font-variant: small-caps;
    }

    div.smallBean {
        font-style: italic;
        font-size: smaller;
        text-align: center !important;
        width: 100% !important;
        margin: 0px;
        padding: 0px;
    }

    tbody.trg {
        display: table-row-group;
    }

    td.notes {
        text-align: left;
        width: 100% !important;
    }