[FIXED] Modify column width in html table inside QTextBrowser

Issue

So I have this html file generated with pandas.Styler.to_html() and want to display inside a Qt application.

I am having trouble modifying the column width. When I open the html file in my browser the width is correct, however, on the qt app, the width always adjusts to the text.

This is how it looks in my app:

This is how it looks on my browser (this is what I want):

Notes: -I want that the columns labeled 29 and 30 are the same size regardless of the text inside. -I have tried putting the width inside various parts with no luck -I don't know much about html (you probably noticed already)

Here is a MWE:

from PyQt5.QtWidgets import QTextBrowser, QApplication

if __name__ == '__main__':
    import sys

    app = QApplication(sys.argv)

    text_browser = QTextBrowser()
    html_s = """
<style type="text/css">
#T_727b1 th {
  border: 1px black solid !important;
  text-align: center;
  line-height: 5px;
  font-size: 10px;
  background-color: gainsboro;
}
#T_727b1 td {
  border: 1px black solid !important;
}
#T_727b1_row0_col0 {
  width: 30px;
}
#T_727b1_row0_col1 {
  width: 30px;
}
</style>
<table id="T_727b1">
  <thead>
    <tr>
      <th id="T_727b1_level0_col0" class="col_heading level0 col0" colspan="2">15</th>
    </tr>
    <tr>
      <th id="T_727b1_level1_col0" class="col_heading level1 col0" >29</th>
      <th id="T_727b1_level1_col1" class="col_heading level1 col1" >30</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td id="T_727b1_row0_col0" class="data row0 col0" >1.24</td>
      <td id="T_727b1_row0_col1" class="data row0 col1" >1.15234</td>
    </tr>
  </tbody>
</table>
        """

    text_browser.setText(html_s)
    text_browser.show()
    text_browser.raise_()

    sys.exit(app.exec_())

Solution

An important thing to remember is that the "HTML" used in Qt standard widgets is not intended in the common (and modern) sense: the only way to get a reliable HTML representation in Qt as it would be in a standard web browser is through the QtWebEngine module (usually with QWebEngineView).

Apart from that, all Qt widgets^[1] that can display formatted text use the QTextDocument API, which supports only a limited subset of HTML (based on the HTML 4.01 specification) and CSS (based on the CSS 2.1 specification). If you're old enough, you can imagine its support similar to a standard webpage while browsing in year 2000.
The "based on" concept is of utmost importance: the HTML content is parsed and translated to a QTextDocument structure, which doesn't provide the full support of the above official specifications: for instance, you cannot use frames (so, not quite "year 2000"...) or iframes.
In fact, if you try to retrieve again the html of the widget, you will not get the same HTML content as the source you originally used^[2].

The reason for this is, obviously, performance: to provide basic text formatting features (similarly to the old RTF format) that can be used in UI elements, without the process load (CPU and RAM) a full featured HTML/CSS engine would require. This allows to easily and quickly show basic formatted content for hundreds or thousands of items, like labels or item views (such as tables, which can have tens of thousands elements): if you just want to show some labels or table cells with a few lines of text and some words in bold, it wouldn't make sense to to load a whole HTML engine and process each one of them with it.

Now, according to the above documentation, we can clearly see that the only available support for table widths is through the old tag-only properties (<... width=...>), since there is no reference to the width property in the list of supported CSS properties.

    <td id="T_727b1_row0_col0" class="data row0 col0" width=40>1.24</td>
    <td id="T_727b1_row0_col1" class="data row0 col1" width=40>1.15234</td>
                                                      ^^^^^^^^

By the way, all this also results in other important aspects that must be considered:

• !important is completely ignored;
• any original <style> tag is not preserved in the HTML output: any styling is applied to each individual text element, and a new <style> is created based on the document defaults;
• classes are not preserved in the HTML output;
• ids are not preserved as such, but exported as anchor names and only for text fragments (paragraphs, spans, table cells), not for frame containers (tables);

^{[1] QLabel, QTextEdit, QTextBrowser (since inherits QTextEdit) and QGraphicsTextItem;
[2] The only exception being QLabel, which always returns the same source string used for setText(), but does not allow access to the QTextDocument used for displaying and keyboard/mouse interaction;}

Answered By - musicamante