如何改进要转换为 PDF 文件的 HTML Table 样式

Question

我有一个 Python 代码可以创建 HTML 表格，然后将其转换为 PDF 文件。这是我目前得到的输出

此图片取自作为结果生成的 PDF 文件（缩小了 55%）

我想让它看起来更好。类似的东西，如果我可以的话

这张图片有 13 列，我不想要那个。我想保留 5 列 ，但我主要关心的是 HTML 文件中 td 的大小。它在 width 中太小了，这就是为什么每个 td 中的文本也堆积得很厉害的原因。但是如果你看另一张图片，文本会更明显，框的宽度也会更大。此外，它也没有高度问题（盒子的高度覆盖了整个 PDF 页面，所有 tds 看起来都不像 stretched down）

我曾尝试在 HTML 文件中调整 td 的高度和宽度，但不幸的是，似乎没有什么对我有用。

编辑：使用onkar ruikar提供的代码，我取得了很好的效果。但是，它造成了我之前面临的相同问题。问题在这里被问到：

我更改了我的 template.html 文件，然后运行相同的代码。但是我得到了这个结果，

如您所见，周一的第一个时段有不止一个讲座，因此，它与两个课程重叠。它现在没有正确读取此 HTML 文件中的 <hr> 命令。

修改后的template.html文件有这段代码，

<!DOCTYPE html>

<html>
<header>
  <style>
  .new-page {
    page-break-before: always;
  }
.center
{
  text-align: center;

}
.left
{
    text-align: left;
    margin-left: 6px;
    /*margin-top: 10px;*/
}
.right
{
    text-align: right;  margin-right: 4px;
}
.teacher
{
    margin-left: 4px;
}
td{
  height:130px;
  width:120px;
}

:root {
  --border-strong: 3px solid #777;
  --border-normal: 1px solid gray;
}

body {
  font-family: Georgia, 'Times New Roman', Times, serif;
}

table>caption {
  font-size: 6mm;
  font-weight: bolder;
  letter-spacing: 1mm;
}


/* 210 x 297 mm */

table {
  width: 297mm;
  height: 210mm;
  border-collapse: collapse;
}

td {
  padding: 1mm;
  border: var(--border-normal);
  position: relative;
  font-size: 2.1mm;
  font-weight: bold;
}

tbody tr:nth-child(odd) {
  background: #eee;
}

tbody tr:last-child {
  border-bottom: var(--border-strong);
}

tbody tr> :last-child {
  border-right: var(--border-strong);
}


/* top header */

.top_head>th {
  width: 54mm;
  height: 10mm;
  vertical-align: bottom;
  border-top: var(--border-strong);
  border-bottom: var(--border-strong);
  border-right: 1px solid gray;
}

.top_head :first-child {
  width: 27mm;
  border: var(--border-strong);
}

.top_head :last-child {
  border-right: var(--border-strong);
}


/* left header */

tbody th {
  border-left: var(--border-strong);
  border-right: var(--border-strong);
  border-bottom: 1px solid gray;
}

tbody>tr:last-child th {
  border-bottom: var(--border-strong);
}


/* row */

tbody td>div {
  height: 34mm;
  overflow: hidden;
}

.vertical_span_all {
  font-size: 5mm;
  font-weight: bolder;
  text-align: center;
  border-bottom: var(--border-strong);
}

.vertical_span_all div {
  height: 10mm;
}


/* td contents */

.left {
  position: absolute;
  top: 1mm;
  left: 1mm;
}

.right {
  position: absolute;
  left: 1mm;
  bottom: 1mm;
}

.teacher {
  position: absolute;
  right: 1mm;
  bottom: 1mm;
}

.note {
  font-size: 3mm;
}

.note :last-child {
  float: right;
}

@page {
  margin: 5mm;
}

  </style>
</header>
<body>
<!-- Heading -->
    <h1 class="center">{{name}}</h1>

<!-- Table -->
    <table>

<!-- Day/Periods -->
        <tr class = "top_head">
      <th scope="col">Day/Period</th>
      <th scope="col">I</th>
      <th scope="col">II</th>
      <th scope="col">III</th>
      <th scope="col">1:15-1:45</th>
      <th scope="col">IV</th>
      <th scope="col">V</th>

        </tr>
        <tbody>
<!-- Monday -->
        <tr>
        <th scope="row" class = "center">
                <b>Monday</b>
            </th>
            
            {% for course in monday %}
                {% if loop.index == 4 %}
                    <td rowspan="6" class="vertical_span_all">
                        <div>L</div>
                        <div>U</div>
                        <div>N</div>
                        <div>C</div>
                        <div>H</div>
                    </td>
                {% endif %}
                {% if course[1] != 0 %}
                    <td colspan={{course[1]}}>
                        <div>
                        {% set count = [] %}
                        {%- for y in range(0, 5) -%}
                            {%- if count|length < course[0]|length -%}
                                <p class="left">
                            
                                    {%- for z in range(count|length, course[0]|length) -%}
                                        {%- if course[0][count|length] == '@' -%}
                                        {%- else -%}
                                            {% set __ = count.append(1) %}
                                            {%- if course[0][count|length-1] == '_' -%}
                                                {{' '}}
                                            {%- else -%}
                                                {{course[0][count|length-1]}}
                                            {%- endif -%}
                                        {%- endif -%}
                                    {%- endfor -%}
                                    </p>
                                    {% set __ = count.append(1) %}
                                    <p class = "right">
                                    {%- for z in range(count|length, course[0]|length) -%}
                                        {%- if course[0][count|length] == '@' -%}
                                        {%- else -%}
                                            {% set __ = count.append(1) %}
                                            {%- if course[0][count|length-1] == '_' -%}
                                                {{' '}}
                                            {%- else -%}
                                                {{course[0][count|length-1]}}
                                            {%- endif -%}
                                        {%- endif -%}
                                    {%- endfor -%}

                                </p>
                            {% set __ = count.append(1) %}
                        <p class = "teacher">
                        {%- for z in range(count|length, course[0]|length) -%}
                            {%- if course[0][count|length] == '@' -%}
                            {%- else -%}
                                {% set __ = count.append(1) %}
                                {%- if course[0][count|length-1] == '_' -%}
                                    {{' '}}
                                {%- else -%}
                                    {{course[0][count|length-1]}}
                                {%- endif -%}
                            {%- endif -%}
                        {%- endfor -%}  
                        </p>
                        <!-- <p class="left">{{course[0]}}</p>
                        <p class="right">{{course[1]}}</p>
                        <p class="teacher">{{course[2]}}</p> -->
                       {%- endif -%}
                      {%- endfor -%}    
                  </div>
                    </td>
                {% endif %}
            {% endfor %}

        </tr>
<!-- Tuesday -->
        <tr>
            <th scope="row" class = "center">
                <b>Tuesday</b>
            </th>
            
            {% for course in tuesday %}
                {% if course[1] != 0 %}
                    <td colspan={{course[1]}}>
                        <div>
                        {% set count = [] %}
                        {%- for y in range(0, 5) -%}
                            {%- if count|length < course[0]|length -%}
                                <p class="left">
                            
                                    {%- for z in range(count|length, course[0]|length) -%}
                                        {%- if course[0][count|length] == '@' -%}
                                        {%- else -%}
                                            {% set __ = count.append(1) %}
                                            {%- if course[0][count|length-1] == '_' -%}
                                                {{' '}}
                                            {%- else -%}
                                                {{course[0][count|length-1]}}
                                            {%- endif -%}
                                        {%- endif -%}
                                    {%- endfor -%}
                                    </p>
                                    {% set __ = count.append(1) %}
                                    <p class = "right">
                                    {%- for z in range(count|length, course[0]|length) -%}
                                        {%- if course[0][count|length] == '@' -%}
                                        {%- else -%}
                                            {% set __ = count.append(1) %}
                                            {%- if course[0][count|length-1] == '_' -%}
                                                {{' '}}
                                            {%- else -%}
                                                {{course[0][count|length-1]}}
                                            {%- endif -%}
                                        {%- endif -%}
                                    {%- endfor -%}

                                </p>
                            {% set __ = count.append(1) %}
                        <p class = "teacher">
                        {%- for z in range(count|length, course[0]|length) -%}
                            {%- if course[0][count|length] == '@' -%}
                            {%- else -%}
                                {% set __ = count.append(1) %}
                                {%- if course[0][count|length-1] == '_' -%}
                                    {{' '}}
                                {%- else -%}
                                    {{course[0][count|length-1]}}
                                {%- endif -%}
                            {%- endif -%}
                        {%- endfor -%}  
                        </p>
                        <!-- <p class="left">{{course[0]}}</p>
                        <p class="right">{{course[1]}}</p>
                        <p class="teacher">{{course[2]}}</p> -->
                       {%- endif -%}
                      {%- endfor -%}
                      </div>    
                    </td>
                {% endif %}
            {% endfor %}
        </tr>
<!-- Wednesday -->
        <tr>
            <td class="center">
                <b>Wednesday</b>
            </td>
            {% for course in wednesday %}
                {% if course[1] != 0 %}
                    <td colspan={{course[1]}}>
                        {% set count = [] %}
                        {%- for y in range(0, 5) -%}
                            {%- if count|length < course[0]|length -%}
                                <p class="left">
                            
                                    {%- for z in range(count|length, course[0]|length) -%}
                                        {%- if course[0][count|length] == '@' -%}
                                        {%- else -%}
                                            {% set __ = count.append(1) %}
                                            {%- if course[0][count|length-1] == '_' -%}
                                                {{' '}}
                                            {%- else -%}
                                                {{course[0][count|length-1]}}
                                            {%- endif -%}
                                        {%- endif -%}
                                    {%- endfor -%}
                                    </p>
                                    {% set __ = count.append(1) %}
                                    <p class = "right">
                                    {%- for z in range(count|length, course[0]|length) -%}
                                        {%- if course[0][count|length] == '@' -%}
                                        {%- else -%}
                                            {% set __ = count.append(1) %}
                                            {%- if course[0][count|length-1] == '_' -%}
                                                {{' '}}
                                            {%- else -%}
                                                {{course[0][count|length-1]}}
                                            {%- endif -%}
                                        {%- endif -%}
                                    {%- endfor -%}

                                </p>
                            {% set __ = count.append(1) %}
                        <p class = "teacher">
                        {%- for z in range(count|length, course[0]|length) -%}
                            {%- if course[0][count|length] == '@' -%}
                            {%- else -%}
                                {% set __ = count.append(1) %}
                                {%- if course[0][count|length-1] == '_' -%}
                                    {{' '}}
                                {%- else -%}
                                    {{course[0][count|length-1]}}
                                {%- endif -%}
                            {%- endif -%}
                        {%- endfor -%}  
                        </p>
                        <!-- <p class="left">{{course[0]}}</p>
                        <p class="right">{{course[1]}}</p>
                        <p class="teacher">{{course[2]}}</p> -->
                       {%- endif -%}
                      {%- endfor -%}    
                    </td>
                {% endif %}
            {% endfor %}
        </tr>
<!-- Thursday -->
        <tr>
            <td class="center">
                <b>Thursday</b>
            </td>
            {% for course in thursday %}
                {% if course[1] != 0 %}
                    <td colspan={{course[1]}}>
                        {% set count = [] %}
                        {%- for y in range(0, 5) -%}
                            {%- if count|length < course[0]|length -%}
                                <p class="left">
                            
                                    {%- for z in range(count|length, course[0]|length) -%}
                                        {%- if course[0][count|length] == '@' -%}
                                        {%- else -%}
                                            {% set __ = count.append(1) %}
                                            {%- if course[0][count|length-1] == '_' -%}
                                                {{' '}}
                                            {%- else -%}
                                                {{course[0][count|length-1]}}
                                            {%- endif -%}
                                        {%- endif -%}
                                    {%- endfor -%}
                                    </p>
                                    {% set __ = count.append(1) %}
                                    <p class = "right">
                                    {%- for z in range(count|length, course[0]|length) -%}
                                        {%- if course[0][count|length] == '@' -%}
                                        {%- else -%}
                                            {% set __ = count.append(1) %}
                                            {%- if course[0][count|length-1] == '_' -%}
                                                {{' '}}
                                            {%- else -%}
                                                {{course[0][count|length-1]}}
                                            {%- endif -%}
                                        {%- endif -%}
                                    {%- endfor -%}

                                </p>
                            {% set __ = count.append(1) %}
                        <p class = "teacher">
                        {%- for z in range(count|length, course[0]|length) -%}
                            {%- if course[0][count|length] == '@' -%}
                            {%- else -%}
                                {% set __ = count.append(1) %}
                                {%- if course[0][count|length-1] == '_' -%}
                                    {{' '}}
                                {%- else -%}
                                    {{course[0][count|length-1]}}
                                {%- endif -%}
                            {%- endif -%}
                        {%- endfor -%}  
                        </p>
                        <!-- <p class="left">{{course[0]}}</p>
                        <p class="right">{{course[1]}}</p>
                        <p class="teacher">{{course[2]}}</p> -->
                       {%- endif -%}
                      {%- endfor -%}    
                    </td>
                {% endif %}
            {% endfor %}

        </tr>
<!-- Friday -->
        <tr>
            <td class="center">
                <b>Friday</b>
            </td>
            {% for course in friday %}
                {% if course[1] != 0 %}
                    <td colspan={{course[1]}}>
                        {% set count = [] %}
                        {%- for y in range(0, 5) -%}
                            {%- if count|length < course[0]|length -%}
                                <p class="left">
                            
                                    {%- for z in range(count|length, course[0]|length) -%}
                                        {%- if course[0][count|length] == '@' -%}
                                        {%- else -%}
                                            {% set __ = count.append(1) %}
                                            {%- if course[0][count|length-1] == '_' -%}
                                                {{' '}}
                                            {%- else -%}
                                                {{course[0][count|length-1]}}
                                            {%- endif -%}
                                        {%- endif -%}
                                    {%- endfor -%}
                                    </p>
                                    {% set __ = count.append(1) %}
                                    <p class = "right">
                                    {%- for z in range(count|length, course[0]|length) -%}
                                        {%- if course[0][count|length] == '@' -%}
                                        {%- else -%}
                                            {% set __ = count.append(1) %}
                                            {%- if course[0][count|length-1] == '_' -%}
                                                {{' '}}
                                            {%- else -%}
                                                {{course[0][count|length-1]}}
                                            {%- endif -%}
                                        {%- endif -%}
                                    {%- endfor -%}

                                </p>
                            {% set __ = count.append(1) %}
                        <p class = "teacher">
                        {%- for z in range(count|length, course[0]|length) -%}
                            {%- if course[0][count|length] == '@' -%}
                            {%- else -%}
                                {% set __ = count.append(1) %}
                                {%- if course[0][count|length-1] == '_' -%}
                                    {{' '}}
                                {%- else -%}
                                    {{course[0][count|length-1]}}
                                {%- endif -%}
                            {%- endif -%}
                        {%- endfor -%}  
                        </p>
                        <!-- <p class="left">{{course[0]}}</p>
                        <p class="right">{{course[1]}}</p>
                        <p class="teacher">{{course[2]}}</p> -->
                       {%- endif -%}
                      {%- endfor -%}    
                    </td>
                {% endif %}
            {% endfor %}

        </tr>
     </tbody>
    </table>

    <p class = "new-page"></div>
</body>

</html>

而我运行的python文件有以下代码，

from typing import List
import pdfkit
from pdfkit.api import configuration
from jinja2 import FileSystemLoader, Environment
wkhtml_path = pdfkit.configuration(wkhtmltopdf = "C:\Program Files\wkhtmltopdf\bin\wkhtmltopdf.exe")  #by using configuration you can add path value.

class section:
    def __init__(self, id, course, section, instructor, room):
        self.id = id
        self.course = course
        self.section = section
        self.instructor = instructor
        self.room = room

def generate_data():
    data = {}

    # For CS-1A
    data["CS-1A"] = [["" for i in range(5)] for j in range(5)]
    data["CS-1A"][0][0] += "Advance_Programming@Mr.Ashas@Room_#2 "
    data["CS-1A"][0][0] += "Applied_Physics@Bilal@Room_#1 "
    data["CS-1A"][0][1] += "Programming_Fundamentals@Muhammad_Bilal@Room_#1 "
    data["CS-1A"][0][3] += "Programming_Fundamentals_Lab@Mr._Abid@Lab_#01 "
    data["CS-1A"][0][4] += "Programming_Fundamentals_Lab@Mr._Abid@Lab_#01 "

    # You may change all these for testing purposes. 
    # data["CS-1A"][0][0].append(section(2, "Programming Fundamentals", "CS-1A", "Bilal", "Room #1"))
    # data["CS-1A"][0][1].append(section(3, "Applied Physics", "CS-1A", "Muhammad Bilal", "Room #5"))
    # obj = section(4, "Programming Lab", "CS-1A", "Mr. Abid", "Lab #01")
    # data["CS-1A"][0][1].append(obj)
    # data["CS-1A"][0][2].append(obj)
    # data["CS-1A"][0][4].append(section(5, "English Communication", "CS-1A1", "Ms. Ayeza", "Cal Lab"))
    # data["CS-1A"][0][4].append(section(6, "English Communication", "CS-1A2", "Ms. Ayesha", "GP Lab"))
    # data["CS-1A"][1][1].append(section(7, "Linear Algebra", "CS-1A", "Ms. Zain", "Romm #2"))
    # obj = section(8, "English Lab", "CS-1A", "Ms. Abida", "Lab #04")
    # data["CS-1A"][1][3].append(obj)
    # data["CS-1A"][1][4].append(obj)
    # data["CS-1A"][2][0].append(section(9, "Social Studies", "CS-1A", "Mr. Zain Iqbal", "Room #14"))
    # data["CS-1A"][2][4].append(section(10, "Programming Fundamentals", "CS-1A", "Bilal", "Room #15"))
    # # No lectures on Thursday i.e. 3rd index
    # obj = section(11, "English Lab", "CS-1A", "Ms. Abida", "Lab #03")
    # data["CS-1A"][4][1].append(obj)
    # data["CS-1A"][4][2].append(obj)
    # data["CS-1A"][4][2].append(section(12, "English Communication", "CS-1A1", "Ms. Ayeza", "Room #3"))
    # data["CS-1A"][4][2].append(section(13, "English Communication", "CS-1A2", "Ms. Ayesha", "GP Lab"))
    #
    #
    #
    # # For CS-1B
    # data["CS-1B"] = [[[] for i in range(5)] for j in range(5)]
    #
    # data["CS-1B"][0][1].append(section(14, "Advance Programming", "CS-1B", "Mr. Ali Hassan", "Room #2"))
    # data["CS-1B"][0][2].append(section(15, "English Comprehension and Communication", "CS-1B", "Mr. Bilal", "Room #1"))
    # obj = section(15, "Software for Mobile and Devices", "CS-1B", "Mr. Jacob", "Room #5")
    # data["CS-1B"][1][1].append(obj)
    # data["CS-1B"][1][2].append(obj)
    # data["CS-1B"][1][3].append(section(17, "Calculus and Geometrical Analytics", "CS-1B", "Ms. Nomi Khan", "Room #06"))
    # data["CS-1B"][2][3].append(section(18, "Introduction to Information and Communication Technology - Lab", "CS-1B1", "Ms. Sarah Niaz", "Lab #01"))
    # data["CS-1B"][2][3].append(section(19, "Introduction to Information and Communication Technology - Lab", "CS-1B2", "Ms. Julia John", "Lab #06"))
    # data["CS-1B"][2][4].append(section(20, "English Comprehenseion and Communication", "Cs-1B", "Mr. Lionel Boyle", "Room #02"))
    # data["CS-1B"][3][3].append(section(21, "Programming Fundamentals", "CS-1B", "Mr. Alex Niles", "Room #3"))
    # data["CS-1B"][4][2].append(section(22, "Linear Algebra", "CS-1B", "Ms. Ayesha", "GP Lab"))

    return data

def organise_input_data(elements: List[List[str]]) -> List[list]:
    """
    Organises the input data to find double courses for easier use in templates
    """
    new_elements = []
    for day in elements:
        last_course = None
        course_list = []
        index = 0
        for course in day:
            # cleanup data
            course = course.strip().replace(" ", "<hr>")
            # check if long course (and not lunch time)
            if course != "" and course == last_course and index != 3:
                course_list.remove((course, 1))
                course_list.append((course, 2))
                course_list.append(("none", 0))
            else:
                course_list.append((course.replace(" ", "<hr>"), 1))
            last_course = course
            index += 1
        new_elements.append(course_list)

    return new_elements


def generate_html(template, name: str, elements: List[list]) -> str:

    new_elements = organise_input_data(elements=elements)

    rendered = template.render(
        name=name,
        monday=new_elements[0],
        tuesday=new_elements[1],
        wednesday=new_elements[2],
        thursday=new_elements[3],
        friday=new_elements[4]
    )

    with open(f"out_{name}.html", "w+") as file:
        file.write(rendered)

    return rendered


def run(input_data):
    # Init jinja
    file_loader = FileSystemLoader('.')
    env = Environment(loader=file_loader)
    template = env.get_template('template.html')

    full_text = ""
    for name, elements in input_data.items():
        full_text += generate_html(template=template, name=name, elements=elements)

    pdfkit.from_string(full_text, "out.pdf", configuration = wkhtml_path)


if __name__ == '__main__':
    data = generate_data()
    run(data)

Answer 1

我在这里所做的是移除 table 的边框并为它们折叠 space。

然后，我为 table 标题和具有语义 class 名称的实际内容使用了更多语义元素。这包括在单元格底部为您想要的元素添加一个新元素。最后老师和代码分别左右浮动

h1 {
  text-align: center;
}

.lunch {
  text-align: center;
  writing-mode: vertical-rl;
  text-orientation: upright;
}

.lunch h2 {
  margin: 0 30px;
}

/*remove borders*/
table {
  border-collapse: collapse;
}

.footer {
  position: absolute;
  bottom: 0;
  padding: 4px;
  width: calc(100% - 8px);
}

.code {
  float: right;
}

.teacher {
  float: left;
}

td,
th {
  height: 175px;
  width: 150px;
  border-bottom: solid 1px black;
  border-right: solid 1px black;
  border-right: solid 1px black;
  position: relative;
}

th:first-child {
  border-left: solid 1px black
}

thead th {
  border-top: solid 1px black;
  border-bottom-width: 2px;
}

td {
  vertical-align: top;
}

<body>
  <!-- Heading -->
  <h1 class="center">CS-1A</h1>

  <!-- Table -->
  <table>
    <!-- Day/Periods -->
    <thead>
      <tr>
        <th>Day/Period</th>
        <th>I</th>
        <th>II</th>
        <th>III</th>
        <th>1:15-1:45</th>
        <th>IV</th>
        <th>V</th>
      </tr>
    </thead>
    <tbody>
      <!-- Monday -->
      <tr>
        <th>Monday</th>
        <td colspan=1>
          <div class="className">Digital Logic Design</div>
          <div class="footer">
            <div class="teacher">Mirza Waqar Baig</div>
            <div class="code">CS-1A</div>
          </div>
        </td>
        <td colspan=1>
          <div class="className">English Composition and Comprehension</div>
          <div class="footer">
            <div class="teacher">Muhammad Ammar</div>
            <div class="code">CS-1A2</div>
          </div>
        </td>
        <td colspan=1>
        </td>
        <td rowspan="6" class="lunch">
          <h2>LUNCH</h2>
        </td>
        <td colspan=1>
          <div class="className">English Composition and Comprehension</div>
          <div class="footer">
            <div class="teacher">Junaid Shahid</div>
            <div class="code">CS-1A1</div>
        </td>
        <td colspan=1>
          <div class="className">Programming Fundamentals</div>
          <div class="footer">
            <div class="teacher">Rizwan ul Haq</div>
            <div class="code">CS-1A</div>
        </td>
      </tr>
      <!-- Tuesday -->
      <tr>
        <th>Tuesday</th>
        <td colspan=1>
          <div class="className">Programming Fundamentals</div>
          <div class="footer">
            <div class="teacher">Rizwan ul Haq</div>
            <div class="code">CS-1A</div>
          </div>
        </td>
        <td colspan=2>
          <div class="className">Programming Fundamentals - Lab</div>
          <div class="footer">
            <div class="teacher">Mughees Ismail</div>
            <div class="code">CS-1A</div>
          </div>
        </td>
        <td colspan=1>
          <div class="className">Islamic Studies/Ethics</div>
          <div class="footer">
            <div class="teacher">Rizwanullah</div>
            <div class="code">CS-1A</div>
          </div>
        </td>
        <td colspan=1>
          <div class="className">English Composition and Comprehension</div>
          <div class="footer">
            <div class="teacher">Junaid Shahid</div>
            <div class="code">CS-1A1</div>
          </div>
        </td>
      </tr>
      <!-- Wednesday -->
      <tr>
        <th>Wednesday</th>
        <td colspan=1>
          <div class="className">Digital Logic Design</div>
          <div class="footer">
            <div class="teacher">Mirza Waqar Baig</div>
            <div class="code">CS-1A</div>
          </div>
        </td>
        <td colspan=2>
          <div class="className">Digital Logic Design - Lab</div>
          <div class="footer">
            <div class="teacher">Muhammad Arslan</div>
            <div class="code">CS-1A</div>
          </div>
        </td>
        <td colspan=2>
          <div class="className">Introduction to Information and Communication Technology - Lab</div>
          <div class="footer">
            <div class="teacher">Muiz Qadir</div>
            <div class="code">CS-1A</div>
          </div>
        </td>
      </tr>
      <!-- Thursday -->
      <tr>
        <th>Thursday</th>
        <td colspan=1>
          <div class="className">Linear Algebra</div>
          <div class="footer">
            <div class="teacher">Amjad Hussain</div>
            <div class="code">CS-1A</div>
          </div>
        </td>
        <td colspan=2>
          <div class="className">English Composition and Comprehension - Lab</div>
          <div class="footer">
            <div class="teacher">Muhammad Iqbal</div>
            <div class="code">CS-1A2</div>
          </div>
        </td>
        <td colspan=2>
          <div class="className">English Composition and Comprehension - Lab</div>
          <div class="footer">
            <div class="teacher">Sadia Ashfaq</div>
            <div class="code">CS-1A1</div>
          </div>
        </td>
      </tr>
      <!-- Friday -->
      <tr>
        <th>Friday</th>
        <td colspan=1>
          <div class="className">English Composition and Comprehension</div>
          <div class="footer">
            <div class="teacher">Muhammad Ammar</div>
            <div class="code">CS-1A2</div>
          </div>
        </td>
        <td colspan=1>
          <div class="className">Islamic Studies/Ethics</div>
          <div class="footer">
            <div class="teacher">Rizwanullah</div>
            <div class="code">CS-1A</div>
          </div>
        </td>
        <td colspan=1>
        </td>
        <td colspan=1>
          <div class="className">Linear Algebra</div>
          <div class="footer">
            <div class="teacher">Amjad Hussain</div>
            <div class="code">CS-1A</div>
          </div>
        </td>
        <td colspan=1>
        </td>
      </tr>

  </table>
</body>

Answer 2

如果您的目标是印刷媒体，则需要以毫米、厘米、英寸为单位指定绝对尺寸。如果您在 A4 页面上打印，那么您的页面是 210x297mm，您需要以横向模式打印它。

对于 printing/pdf，页面的样式需要如下所示：

:root {
  --border-strong: 3px solid #777;
  --border-normal: 1px solid gray;
}

body {
  font-family: Georgia, 'Times New Roman', Times, serif;
}

table>caption {
  font-size: 6mm;
  font-weight: bolder;
  letter-spacing: 1mm;
}


/* 210 x 297 mm */

table {
  width: 297mm;
  height: 210mm;
  border-collapse: collapse;
}

td {
  padding: 1mm;
  border: var(--border-normal);
  position: relative;
  font-size: 2.1mm;
  font-weight: bold;
}

tbody tr:nth-child(odd) {
  background: #eee;
}

tbody tr:last-child {
  border-bottom: var(--border-strong);
}

tbody tr> :last-child {
  border-right: var(--border-strong);
}


/* top header */

.top_head>th {
  width: 54mm;
  height: 10mm;
  vertical-align: bottom;
  border-top: var(--border-strong);
  border-bottom: var(--border-strong);
  border-right: 1px solid gray;
}

.top_head :first-child {
  width: 27mm;
  border: var(--border-strong);
}

.top_head :last-child {
  border-right: var(--border-strong);
}


/* left header */

tbody th {
  border-left: var(--border-strong);
  border-right: var(--border-strong);
  border-bottom: 1px solid gray;
}

tbody>tr:last-child th {
  border-bottom: var(--border-strong);
}


/* row */

tbody td>div {
  height: 34mm;
  overflow: hidden;
}

.vertical_span_all {
  font-size: 5mm;
  font-weight: bolder;
  text-align: center;
  border-bottom: var(--border-strong);
}

.vertical_span_all div {
  height: 10mm;
}


/* td contents */

.left {
  width: 95%;
  position: absolute;
  top: 1mm;
  left: 1mm;
}

.left>div {
  width: 100%;
  margin-bottom: 3mm;
  border-bottom: 1px dashed;
}

.right {
  position: absolute;
  left: 1mm;
  bottom: 1mm;
}

.teacher {
  position: absolute;
  right: 1mm;
  bottom: 1mm;
}

.note {
  font-size: 3mm;
}

.note :last-child {
  float: right;
}

@page {
  margin: 5mm;
}

<!-- Table -->
<table>
  <caption>CS-1A</caption>
  <thead>
    <tr class='top_head'>
      <th scope="col">Day/Period</th>
      <th scope="col">I</th>
      <th scope="col">II</th>
      <th scope="col">III</th>
      <th scope="col">1:15-1:45</th>
      <th scope="col">IV</th>
      <th scope="col">V</th>
    </tr>
  </thead>
  <tbody>
    <!-- Monday -->
    <tr>
      <th scope="row" class="center">
        <b>Monday</b>
      </th>
      <td colspan=1>
        <div class="left">
          <div>Digital Logic Design</div>
          <div>Applied Physics</div>
          <div>Advanced Programming</div>
        </div>
        <p class="right">Mirza Waqar Baig</p>
        <p class="teacher">CS-1A</p>
      </td>
      <td colspan=1>
        <div class="left">
          <div>English Composition and Comprehension</div>
          <div>Applied Physics</div>
        </div>
        <p class="right">Muhammad Ammar</p>
        <p class="teacher">CS-1A2</p>
      </td>
      <td colspan=1>
      </td>
      <td rowspan="6" class="vertical_span_all">
        <div>L</div>
        <div>U</div>
        <div>N</div>
        <div>C</div>
        <div>H</div>
      </td>
      <td colspan=1>
        <div>
          <div class="left">English Composition and Comprehension</div>
          <p class="right">Junaid Shahid</p>
          <p class="teacher">CS-1A1</p>
        </div>
      </td>
      <td colspan=1>
        <div>
          <div class="left">Programming Fundamentals</div>
          <p class="right">Rizwan ul Haq</p>
          <p class="teacher">CS-1A</p>
        </div>
      </td>
    </tr>
    <!-- Tuesday -->
    <tr>
      <th scope="row" class="center">
        <b>Tuesday</b>
      </th>
      <td colspan=1>
        <div>
          <div class="left">Programming Fundamentals</div>
          <p class="right">Rizwan ul Haq</p>
          <p class="teacher">CS-1A</p>
          <div>
      </td>
      <td colspan=2>
        <div>
          <div>
            <div class="left">Programming Fundamentals - Lab</div>
            <p class="right">Mughees Ismail</p>
            <p class="teacher">CS-1A</p>
          </div>
      </td>
      <td colspan=1>
        <div>
          <div class="left">Islamic Studies/Ethics</div>
          <p class="right">Rizwanullah</p>
          <p class="teacher">CS-1A</p>
        </div>
      </td>
      <td colspan=1>
        <div>
          <div class="left">English Composition and Comprehension</div>
          <p class="right">Junaid Shahid</p>
          <p class="teacher">CS-1A1</p>
        </div>
      </td>
    </tr>
    <!-- Wednesday -->
    <tr>
      <th scope="row" class="center">
        <b>Wednesday</b>
      </th>
      <td colspan=1>
        <div>
          <div class="left">Digital Logic Design</div>
          <p class="right">Mirza Waqar Baig</p>
          <p class="teacher">CS-1A</p>
        </div>
      </td>
      <td colspan=2>
        <div>
          <div class="left">Digital Logic Design - Lab</div>
          <p class="right">Muhammad Arslan</p>
          <p class="teacher">CS-1A</p>
        </div>
      </td>
      <td colspan=2>
        <div>
          <div class="left">Introduction to Information and Communication Technology - Lab</div>
          <p class="right">Muiz Qadir</p>
          <p class="teacher">CS-1A</p>
        </div>
      </td>
    </tr>
    <!-- Thursday -->
    <tr>
      <th scope="row" class="center">
        <b>Thursday</b>
      </th>
      <td colspan=1>
        <div>
          <div class="left">Linear Algebra</div>
          <p class="right">Amjad Hussain</p>
          <p class="teacher">CS-1A</p>
        </div>
      </td>
      <td colspan=2>
        <div>
          <div class="left">English Composition and Comprehension - Lab</div>
          <p class="right">Muhammad Iqbal</p>
          <p class="teacher">CS-1A2</p>
        </div>
      </td>
      <td colspan=2>
        <div>
          <div class="left">English Composition and Comprehension - Lab</div>
          <p class="right">Sadia Ashfaq</p>
          <p class="teacher">CS-1A1</p>
        </div>
      </td>
    </tr>
    <!-- Friday -->
    <tr>
      <th scope="row" class="center">
        <b>Friday</b>
      </th>
      <td colspan=1>
        <div>
          <div class="left">English Composition and Comprehension</div>
          <p class="right">Muhammad Ammar</p>
          <p class="teacher">CS-1A2</p>
        </div>
      </td>
      <td colspan=1>
        <div>
          <div class="left">Islamic Studies/Ethics</div>
          <p class="right">Rizwanullah</p>
          <p class="teacher">CS-1A</p>
        </div>
      </td>
      <td colspan=1>
        <div>
        </div>
      </td>
      <td colspan=1>
        <div>
          <div class="left">Linear Algebra</div>
          <p class="right">Amjad Hussain</p>
          <p class="teacher">CS-1A</p>
        </div>
      </td>
      <td colspan=1>
        <div>
        </div>
      </td>
    </tr>
  </tbody>
</table>
<div class='note'><span>w.e.f. Monday, September 13, 2021</span> <span>aSc Timetables</span></div>

这是打印 pdf 时的样子：

要在一个单元格中包含多个课程，请使用如下结构：

        <td colspan=1>
          <div class="left">
            <div>Digital Logic Design</div>
            <div>Applied Physics</div>
            <div>Advanced Programming</div>
          </div>
          <p class="right">Mirza Waqar Baig</p>
          <p class="teacher">CS-1A</p>
        </td>

也看看修改后的样式

如何改进要转换为 PDF 文件的 HTML Table 样式

How to improve the HTML Table Styling that is to be converted into a PDF File

html

css

html-table

pdfkit

jinja2