0
499
ViewsCómo mejorar el estilo de tabla HTML que se va a convertir en un archivo PDF
Tengo un código de Python que crea tablas HTML y luego las convierte en un archivo PDF. Esta es la salida que estoy obteniendo actualmente
Esta imagen está tomada del archivo PDF que se está generando como resultado (y está alejada al 55 %)
Quiero hacer que esto se vea mejor. Algo similar a esto, si se me permite
Esta imagen tiene 13 columnas, no quiero eso. Quiero mantener 5 columnas, pero mi principal preocupación es el tamaño de la td en mis archivos HTML. Es demasiado pequeño en width y es por eso que el texto también está muy apilado en cada td . Pero si miras la otra imagen, el texto es mucho más visible y los cuadros tienen un ancho mucho más grande. Además, tampoco tiene problemas de altura (la altura de la caja es tal que cubre toda la página PDF y todos los tds no parecen stretched down )
He intentado jugar con la altura y el ancho de mi td en el archivo HTML, pero desafortunadamente, nada parecía funcionar para mí.
Editar : Usando el código proporcionado por onkar ruikar , pude lograr muy buenos resultados. Sin embargo, creó el mismo problema al que me enfrentaba anteriormente. La pregunta se hizo aquí: combine y divida horizontalmente las celdas en una tabla HTML para el horario basado en los datos en el archivo de Python
Cambié el archivo template.html mío y luego ejecuté el mismo código. Pero obtuve este resultado,
Como puede ver, hubo más de una conferencia en el Primer Turno del lunes, y debido a eso, se superpusieron ambos cursos. Ahora no está leyendo correctamente el comando <hr> en este archivo HTML.
El archivo template.html modificado tiene este código,
<!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>Y el archivo python que estoy ejecutando tiene el siguiente código,
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 ie 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)
·
Santiago Trujillo
2 answers
Answer question0
Lo que he hecho aquí es eliminar los bordes de la tabla y colapsar el espacio para ellos.
Luego usé más elementos semánticos tanto para los encabezados de las tablas como para su contenido real con nombres de clases semánticas. Esto incluyó agregar un nuevo elemento para los elementos que desea en la parte inferior de la celda. Finalmente, el maestro y los códigos flotan a la izquierda y a la derecha respectivamente.
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>
·
Santiago Trujillo
Report
0
Si se dirige a los medios de impresión, debe especificar las dimensiones absolutas en mm, cm, pulgadas. Si está imprimiendo en una página A4, su página es de 210x297mm y debe imprimirla en modo horizontal.
Para imprimir/pdf, la página debe tener este estilo:
: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>wef Monday, September 13, 2021</span> <span>aSc Timetables</span></div>Así es como se ve al imprimir pdf:
Para tener múltiples cursos en una estructura de uso de celda como esta:
<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>También mire el estilo modificado.
·
Santiago Trujillo
Report
Answer question