Html Question posted in
Some basic documentation can be found here.

printing HTML table in PyQt6

The essue is to print QTableWidget from my PyQt6 application.

It actually works, but there is a small problem: I have tables embedded in the main table and i’d like those tables to fill complitly parent cells (100% of its width), but child tables don’t expand.

This is my code:

import sys
from PyQt6 import QtWidgets, QtPrintSupport
from PyQt6.QtGui import QTextDocument


class MyWidget(QtWidgets.QWidget):
    def __init__(self):
        super().__init__()
        self.table_widget = QtWidgets.QTableWidget()
        self.button = QtWidgets.QPushButton('Print TableWidget')
        self.layout = QtWidgets.QVBoxLayout(self)
        self.layout.addWidget(self.table_widget)
        self.layout.addWidget(self.button)
        self.button.clicked.connect(self.print_table)

    def print_table(self):
        html_table = '''<table cellpadding="0">
                          <tr><th>header1</th><th>header2</th><th>header3</th></tr>
                          <tr><td>data1</td><td>data2</td>
                            <td><table>
                                <tr><th>header1</th><th>header2</th><th>header3</th></tr>
                                <tr><td>data3</td><td>data3</td><td>data3</td></tr>
                              </table></td></tr>
                          <tr><td>data1</td><td>data2</td>
                            <td><table>
                                <tr><th>hr1</th><th>hr2</th><th>hr3</th><th>hr4</th></tr>
                                <tr><td>d3</td><td>d3</td><td>d3</td><td>d3</td></tr>
                                <tr><td>d3</td><td>d3</td><td>d3</td><td>d3</td></tr>
                              </table></td></tr>
                        </table>'''

        style_sheet = '''table {border-collapse:collapse; width:100%}
                            th {background-color:lightblue; border: 1px solid gray; height:1em}
                            td {border: 1px solid gray; padding:0; vertical-align:top}                                
                            '''
        text_doc = QTextDocument()
        text_doc.setDefaultStyleSheet(style_sheet)
        text_doc.setHtml(html_table)
        prev_dialog = QtPrintSupport.QPrintPreviewDialog()
        prev_dialog.paintRequested.connect(text_doc.print)
        prev_dialog.exec()

if __name__ == '__main__':
    app = QtWidgets.QApplication([])
    widget = MyWidget()
    widget.resize(640,480)
    widget.show()
    sys.exit(app.exec())

And this is what i get:

enter image description here

But this is what i want:

enter image description here

I have no ideas how to fix it. I would be very appreciate for any ideas.

Tags:

2

Answers


  1. 0

    You can make the embedded tables fill the parent cells by adding CSS styles for width: 100% and table-layout: fixed. Here’s the solution:

    1. Add width: 100%; table-layout: fixed; to both the main and embedded
      tables to ensure they stretch to fill their containers.

    2. Set column widths in the embedded tables to distribute space evenly.

    Here’s the updated code snippet:

    style_sheet = '''table {border-collapse:collapse; width:100%; table-layout: fixed;}
            th {background-color:lightblue; border: 1px solid gray; height:1em}
            td {border: 1px solid gray; padding:0; vertical-align:top}
            td > table {width: 100%; table-layout: fixed;}
            td > table th, td > table td {width: 25%;}
            '''

    This should expand the embedded tables to fill the parent cells completely.

    Login or Signup to reply.
  2. 0

    The rich text in Qt only provides a limited subset of HTML and CSS. More specifically, it only provides what QTextDocument allows, and the HTML parsing is therefore completely based on the QTextDocument capabilities.

    Complex layouts that may be easier to achieve with standard HTML and CSS in a common web browser, may be difficult if not impossible to get in Qt, and the documentation has to be carefully checked.

    Specifically, the width property is not listed in the CSS Properties list.
    Nonetheless, it is supported as an HTML attribute for many tags, including table and their cells.

    Note: there may be occurrences of tags/CSS behavior that works "as expected" even if not documented, but you shall not rely on those, unless it’s been found consistent in multiple and previous Qt versions, and possibly upon careful checking of consistency in the sources, both for the parser, and the document layout structure.

    Just remove that property from the CSS, and use it as an attribute, for example:

    <table width="100%">
    ...
    <tr><td width="75%">
        <table width="100%">
            ...
        </table>
    </td></tr>
</table>

    The above will make the parent table occupy the full viewport (or page) width, with the column containing the nested table being 75% of that width, and that table occupying the cell in full, horizontally.

    As already noted, if you want more control on the layout/appearance and better/modern HTML and CSS support, the only option is to use the QtWebEngine related classes, but be aware that that module alone is more than 150MB in size, so consider that requirement carefully.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search