在 Table 的单元格中打印 Table 未对齐

Question

我正在制作一个 localhost 网站来跟踪我家人的药物以及每周打印出的表格，我们用它来确保所有药物都放在所有适当的容器中，如果有的话丢失了，我们知道去药店买什么...

我正在使用 @media print { @page {size: letter}...} 来确保打印页面的方向正确（对比 landscape）。

我运行的问题是美学...

由于并非在一天中的每个“时间”都服用了所有药片，因此我的表格只列出了行（在下图中指定为 “AM NOON PM BED PRN NOTES”) 需要用于该特定药物。最初我使用 rowspan='$rows' 来做到这一点，计算结果很好并且工作正常 - 直到我打印它。它会在 PM 或 Bed 打破行，因为根据系统，它是一个新的 <tr> 并且可以 page-break-after.

从那以后我就开始在主 table

中使用 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>";

和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**/
}

出于某种原因，我无法将单元格（<td class='tinyBoxes'> 或 1 或 2）全部排列起来。

我已经设置了它们的宽度（在 <th> 和 <td> 中）但是只要有东西在 notes 又名 <td class='other'>

具体 CSS 到 .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

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

我添加了 table-layout: fixed;，它接近...

偶尔 row 在 TOD column

关闭 1px

Answer 1

我最终删除了整个内容并从头开始 - 虽然它确实有效，所以我想我们很好...

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>";

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

在 Table 的单元格中打印 Table 未对齐

Printed Table within a Table's cells not lining up

html

css

php

html-table