无法在 Pyqt5 中的 Qtext 编辑中使用 jinja2 设置表格的 CSS（文本换行和水平滚动条）

Question

我正在尝试使用 jinja2 在 Qtextedit 中显示一个表格。 我的表格包含几个标题，它做了什么，它尝试在单个显示器上一次显示所有标题，因为它将文本包装在表格中。 我尝试添加一个 x-scroll bar 和 white-space: 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 中呈现的 class）仅支持 CSS 2.1，因此您使用的样式可能使用了更高版本的属性，例如“overflow-x”是 Z2BE25667A1DD3387FFE30B9 的一部分。

在这种情况下，一个可能的解决方案是使用 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_())