如何让 <thead> 和 <tfoot> 在使用 <td rowspan> 时不重叠单元格

Question

所以我正在制作一个 localhost 网站来跟踪我家人的药物（超过 50 种药物）。我正在写它的一页，以便我们每个人（总共 4 个人）@print 出 tables，以便我们每个星期天装满我们的医疗容器。综上所述，我妻子要我让 <th> 显示在每一页（顶部和底部）上。

我做了一些研究，找到了基本问题的一个很好的答案：How to use HTML to print header and footer on every printed page of a document?

这是一个很好的答案，我从下面的 table 开始，即 echo 和 PHP。我暂时取出了 PHP，但如果有人真的需要它可以添加它。我使用 PHP 因为数据来自 SQL>Database >Table.

HTML（来自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;
    }
}

这是我运行遇到的问题...

在 table 的数据收集和填充中，我使用 <td rowspan=''> 并按服用时间分解每种药物。当 table 与此断行时，剩余的 <td rowspan='1'> 会被 <thead> 重叠。

IMGUR Image of what the print looks like

**编辑 - 附加信息**

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

Answer 1

一些工作，我想出了一些解决方法 - 不是很好，但它确实实现了我想要的目的...

I removed the <tfoot> - it wasn't necessary and was where the problem was being caused.

I found an error in my <td class='tinyBoxes'> cells - some said "tonyBoxes" and a few were missing the class='` portion

echo "<td class='tinyBoxes'></div><td class='tinyBoxes'></td><td class='tinyBoxes'></td><td class='tinyBoxes'></td>
<td class='tinyBoxes'></td><td class='tinyBoxes'></td><td class='tinyBoxes'></td>";
echo "<td rowspan='" . $rows . "' style='width:125px !important;font-size:0.15in;'>" . $nextFill . "</td>";
echo "</tr>";

if (($rows > 1) && ($other != 1)) {
    if ($noon == 1) {
        echo "<tr class='tiny'>";
        echo "<td rowspan = '1'>Noon</td>";
        echo "<td class='tinyBoxes'></div><td class='tinyBoxes'></td><td class='tinyBoxes'></td><td class='tinyBoxes'></td>
<td class='tinyBoxes'></td><td class='tinyBoxes'></td><td class='tinyBoxes'></td>";
        echo "</tr>";
    }
    if ($pm == 1) {
        echo "<tr class='tiny'>";
        echo "<td rowspan = '1'>PM</td>";
        echo "<td class='tinyBoxes'></div><td class='tinyBoxes'></td><td class='tinyBoxes'></td><td class='tinyBoxes'></td>
<td class='tinyBoxes'></td><td class='tinyBoxes'></td><td class='tinyBoxes'></td>";
        echo "</tr>";
    }
    if ($bed == 1) {
        echo "<tr class='tiny'>";
        echo "<td rowspan = '1'>Bed</td>";
        echo "<td class='tinyBoxes'></div><td class='tinyBoxes'></td><td class='tinyBoxes'></td><td class='tinyBoxes'></td>
<td class='tinyBoxes'></td><td class='tinyBoxes'></td><td class='tinyBoxes'></td>";
        echo "</tr>";
    }
    if ($prn == 1) {
        echo "<tr class='tiny'>";
        echo "<td rowspan = '1'>PRN</td>";
        echo "<td class='tinyBoxes'></div><td class='tinyBoxes'></td><td class='tinyBoxes'></td><td class='tinyBoxes'></td>
<td class='tinyBoxes'></td><td class='tinyBoxes'></td><td class='tinyBoxes'></td>";
        echo "</tr>";
    }
}

和

/*
echo "
<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>";
*/

如何让 <thead> 和 <tfoot> 在使用 <td rowspan> 时不重叠单元格

How to get <thead> and <tfoot> to not overlap cells when using <td rowspan>

html

css

php

mysql

html-table