Unable to set CSS of table (text-wrap and horizontal scroll-bar)using jinja2 inside Qtext edit in Pyqt5

Question

I am trying to display a table inside Qtextedit using jinja2. My table contains several headers, and what it has done it, it tries to display all the headers all at once on single display due to which it wraps the text inside table. I tried to add a x-scroll bar and white-space: nowrap, but it doesn't make any difference.

Is there any specific problem due to Qtextedit or anything I am not able to understand. Here is the code that I am using

table = """
                        <style>
                        .table_wrapper{
                                        display: block;
                                        overflow-x: auto;
                                        white-space: nowrap;
                                    }
                        table {
                            font-family: arial, sans-serif;
                            border-collapse: collapse;
                            width: 100%;
                            overflow-x: auto;
                            border: 1px solid black;
                            table-layout: fixed
                        }

                        td {
                            border: 1px solid #dddddd;
                            text-align: center;
                            padding: 8px;
                            white-space: nowrap;
                            width: 100px;

                        }
                        th { 
                            border: 1px solid #dddddd;
                            text-align: center;
                            padding: 8px;
                            white-space: nowrap;
                            width: 100px;
                         } 
                        div {
                              overflow: auto;;
                            }
                        </style>

                    <div class="table_wrapper">
                        <table border="1">
                            <tr>{% for header in headers %}<th>{{header}}</th>{% endfor %}</tr>
                            {% for row in rows %}<tr>
                                {% for element in row %}<td>
                                    {{element}}
                                </td>{% endfor %}
                            </tr>{% endfor %}
                        </table>
                    </div>
                        """

Answer 1

QTextDocument (which is the class that renders in QTextEdit) only supports CSS 2.1, so probably the style you use uses properties from a higher version, for example "overflow-x" is part of CSS3.

In this case a possible solution is to use QWebEngineView.

In the following example I show how the same html is rendered in QTextEdit and QWebEngineView:

from jinja2 import Environment
from PyQt5 import QtCore, QtGui, QtWidgets, QtWebEngineWidgets

template = """
<style>
    .table_wrapper{
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    table {
        font-family: arial, sans-serif;
        border-collapse: collapse;
        width: 100%;
        overflow-x: auto;
        border: 1px solid black;
        table-layout: fixed
    }
    td {
        border: 1px solid #dddddd;
        text-align: center;
        padding: 8px;
        white-space: nowrap;
        width: 100px;
    }
    th {
        border: 1px solid #dddddd;
        text-align: center;
        padding: 8px;
        white-space: nowrap;
        width: 100px;
    }
    div {
        overflow: auto;;
    }
</style>

<div class="table_wrapper">
    <table border="1">
    <tr>{% for header in headers %}<th>{{header}}</th>{% endfor %}</tr>
    {% for row in rows %}<tr>
        {% for element in row %}<td> 
            {{element}}
            </td>
        {% endfor %}
        </tr>
    {% endfor %}
    </table>
</div>"""


if __name__ == "__main__":
    import sys

    app = QtWidgets.QApplication(sys.argv)
    app.setStyle("fusion")

    headers = "Stack Overflow".split()
    rows = [("col-1", "col-2") for i in range(100)]
    html = Environment().from_string(template).render(headers=headers, rows=rows)

    w = QtWidgets.QSplitter()

    te = QtWidgets.QTextEdit()
    te.setHtml(html)

    view = QtWebEngineWidgets.QWebEngineView()
    view.setHtml(html)

    w.addWidget(te)
    w.addWidget(view)
    w.show()
    sys.exit(app.exec_())