Important: Please read the Qt Code of Conduct -

CSS styling richtext in QTextDocument

  • Hello,

    SHORT: Some styles from the supported subset are not working.

    I work in a reporting project. My report contains images tables and graphs. I can successfully add all items. Then I safe it as pdf using Qt, works very nice.

    The main problem is with table styling. According to the css styles I need should be supported.

    For case of this topic I created minimal demo app using Qt Widgets. On test button it loads css file and template html file. It sets it to the QTextEdit document a and displays.

    What does not work is the width style (nor as attribute) and also separate borders not work, like border-bottom-width: 2px;

    At the end I attach print screens from the app and reference screen from chromium.

    Demo project in a zip file (6kB):

    Thanks for any hints.

    Regards, Thomas

    Example code:

    mainwindow.cpp :

    void MainWindow::on_pushButton_clicked()
      //open HTML and CSS files
      QFile tstFile("../test.html");
      QFile cssFile("../styles.css");;;
      //get QTextDocument reference
      QTextDocument *doc = ui->textEdit->document();
      //Set CSS and HTML
      //Show Qt version
      //close files

    test.html :

    	<!-- for use in a classic browser: only for demo, not used in real app -->
    	<link rel="stylesheet" href="./styles.css">
    	<table class="superTable">
    			<table class="tableA"><tr><td>long text, longer than others, right at the top</td></tr></table>
    			<table class="tableB">
    					<td class="cellA">cell A</td>
    					<td class="cellB">cell B</td>

    styles.css :

    body {
    	color: black;
    	background: yellow;
    table {
    	border-style: solid;
    	border-width: 1px;
    	border-collapse: collapse;
    .superTable {
    	border-top-style: dotted; /* not working */
    	border-bottom-style: dotted; /* not working */
    	border-bottom-width: 2px; /* not working */
    	border-right-width: 2px; /* not working */
    	width: 500px; /* not working */
    	min-width: 500px; /* not working */
    .tableA {
    	border: 2px dotted red; /* combined styles not working */
    .tableB {
    	width: 100%; /* cannot test as width is not working */
    	align: center; /* not working */
    	text-align: center; /*standart css for browsers*/
    .tableB .cellA{
    	width: 30%; /* not working */
    	border-style: solid;
    	border-width: 1px;
    	border-collapse: collapse;
    .tableB .cellB {
    	width: 70%; /* not working */
    	border-style: solid;
    	border-width: 1px;
    	border-collapse: collapse;

    Result :

    Browser reference:

  • Qt Champions 2019

    Qt does not support all HTML and CSS attributes - see

    /edit: border-top-style: dotted; should work though... will take a look.

  • @Christian-Ehrlicher Hello, thank you. I know, it is what I say in the question. I use only those mentioned in supported subset as given in the link. Like width. But they do not work for some reason.

  • Qt Champions 2019

    At least I found the reason why border-style does no longer work - it was due to which added some new capabilities (border-collapse)

  • @Christian-Ehrlicher I read it was fixed as of Qt 5.14. But I think I can live with that.

    I found that the width works as attribute. At least the relative % variant.

  • I struggled with styling the html in QTextDocument. In my code I created an XML representation and then used XSLT stylesheet to convert to HTML. I am not completely satisfed with the output as I had issues making it look the way I wanted. I think I will eventually convert the XML to QML code on the fly. There were so many limitations with the HTML/CSS in QTextDocument it was very frustrating.

  • @fcarney Hello, thanks. Yes, it so limited that the use is only very basic. I am thinking of QML as well. But I never got in touch with that, and it is as learning whole new language. I do not know which way I would have to go. Well new adventure in front of me.

    I am also looking at this report designer:

    What I like about HTML/CSS, is that everybody knows it, so it can be edited by any body who knows IT basics. I miss just few more styles and I would be happy.

  • Qt Champions 2019

    @hullatom said in CSS styling richtext in QTextDocument:

    I read it was fixed as of Qt 5.14.

    You read it wrong - I said that this fix introduced the regression about not honoring the border-style when using border-collapse.

  • @Christian-Ehrlicher Maybe, it is somewhere in the text hidden? The summary on top of the page is saying:

    Type: Suggestion
    Priority: P4: Low
    Affects Version/s:
    Fix Version/s:
    5.14.0 Alpha

    Created: 13 Jan '14 22:56
    Updated: 20 Aug '19 11:07
    Resolved: 08 Aug '19 17:59

  • Qt Champions 2019

    @hullatom Read:

    At least I found the reason why border-style does no longer work - it was due to which added some new capabilities (border-collapse)

    border-style does not work together with border-collapse.

  • Qt Champions 2019

Log in to reply