Невозможно установить CSS таблицы (обтекание текстом и горизонтальная полоса прокрутки), используя jinja2 внутри редактирования Qtext в Pyqt5

Question

Я пытаюсь отобразить таблицу внутри Qtextedit, используя jinja2.Моя таблица содержит несколько заголовков, и для этого она пытается отобразить все заголовки одновременно на одном экране, благодаря чему оборачивает текст внутри таблицы.Я попытался добавить полосу прокрутки x и пробел: nowrap, но это ничего не меняет.

Есть ли какая-то конкретная проблема из-за Qtextedit или чего-то, чего я не могу понять.Вот код, который я использую

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 (класс, который отображает в QTextEdit) поддерживает только CSS 2.1, поэтому, вероятно, используемый вами стиль использует свойства более высокой версии, например, «overflow-x» является частью CSS3.

В этом случае возможное решение состоит в том, чтобы использовать QWebEngineView.

В следующем примере я показываю, как один и тот же HTML-код отображается в QTextEdit и 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_())