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

Posted 2023-03-30

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

【英文标题】：Unable to set CSS of table (text-wrap and horizontal scroll-bar)using jinja2 inside Qtext edit in Pyqt5

【发布时间】：2019-09-24 10:00:40

【问题描述】：

我正在尝试使用 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>
                        """

【问题讨论】：

Qt 文档：Supported html Subset.

【参考方案1】：

QTextDocument（在 QTextEdit 中呈现的类）仅支持 CSS 2.1，因此您使用的样式可能使用了更高版本的属性，例如“overflow-x”是 CSS3 的一部分。

在这种情况下，一个可能的解决方案是使用 QWebEngineView。

在下面的示例中，我展示了如何在 QTextEdit 和 QWebEngineView 中呈现相同的 html：

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_())

【讨论】：

我还通过设置 QTextedit().setWordWrapMode(False) 找到了相同的解决方法