那些遇到过的问题

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

Awa*_*hid 5 html css html-table pdfkit jinja2

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

55% 变焦时

该图像取自正在生成的 PDF 文件（缩小了 55%）

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

在此输入图像描述

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

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

编辑：使用 提供的代码onkar ruikar，我能够取得非常好的结果。然而，它造成了我之前遇到的同样的问题。这里提出了这个问题：Horizo​​ntally merge and split cells in an HTML Table for Timetable based on the Data in Python File

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

在此输入图像描述

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

修改后的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] == '@' -%}

onk*_*kar 5

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

对于打印/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;
}
Run Code Online (Sandbox Code Playgroud) 
<!-- 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>
Run Code Online (Sandbox Code Playgroud)

这是打印 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>
Run Code Online (Sandbox Code Playgroud)

还要看看修改后的样式。

归档时间：

查看次数：

4511 次

最近记录：

3 年，12 月 前
根据Python文件中的数据水平合并和划分HTML表格中的时间表单元格 5
更多相关链接
相关归档
设置ajax(jQuery)的超时 181
如何将JSF图像资源引用为CSS背景图像url 34
内联元素和行高 34
如何混合css3转换属性而不覆盖(实时)？ 25
CSS url()函数中<url-modifier>的示例用法是什么？ 24
位置:隐藏在后面元素后面的绝对元素 17
如何使用纯CSS实现流体字体大小 16
如何填充我的WTForm变量？ 15
添加文本溢出：省略号；到表格单元格 5
如何使用jQuery获取表格单元格值 2
难疑归档
如何强制"git pull"覆盖本地文件？ 6654
为什么"使用命名空间std"被认为是不好的做法？ 2486
什么是复制和交换习语？ 1907
2048游戏的最佳算法是什么？ 1893
什么是智能指针,什么时候应该使用？ 1730
如何在Python中通过索引从列表中删除元素？ 1381
<meta http-equiv ="X-UA-Compatible"content ="IE = edge">是做什么用的？ 1378
获取实例的类名？ 1303
"this"关键字如何运作？ 1243
endsWith在JavaScript中 1085