How to use border-color and border-collapse in html table?

Quang Phu

Hi everyone,

I want to create a simple table in html file and show it in Qt app, but it seem border-color and border-collapse don't work on qml?
I created an example:

import QtQuick 2.14
import QtQuick.Window 2.14

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    Rectangle {
        anchors.fill: parent
        color: "lightblue"
        Text {
            id: mytext
            anchors.centerIn: parent
            textFormat: Text.RichText
            text: "<table border=\"1\" border-collapse=\"collapse\" border-color=\"red\" width=\"300\" cellspacing=\"0\" cellpadding=\"0\"><tr><td>whaterever</td><td>whaterever</td></tr><tr><td>whaterever</td><td>whaterever</td></tr>"
        }
    }
}

but this is result:
Screenshot from 2020-03-02 14-12-35.png
So how can I deal with this, or are there any ways to use html table in QML?

Quang Phu

Up......

JonB

@Quang-Phu
I admit I don't know about about border-color, but what makes you think Qt/QML tables should do anything with border-collapse? So far as I know QML/Qt Quick does not offer a full HTML interpreter.

Quang Phu

@JonB ,
I just want to view a normal table in html file in QML (with custom color and collapse line) and waiting solution.
In normal html these properties work well, did I miss something??

JKSH

@Quang-Phu said in How to use border-color and border-collapse in html table?:

it seem border-color and border-collapse don't work on qml?

The documentation (https://doc.qt.io/qt-5/qml-qtquick-text.html ) says, "Note that the Supported HTML Subset is limited." The supported tags are listed at https://doc.qt.io/qt-5/richtext-html-subset. border-color and border-collapse are not supported.

EDIT: border-color and border-collapse are supported in Qt, but they are CSS properties, not HTML attributes. They must be placed in a stylesheet or the style attribute.

If you want a full-fledged HTML renderer, you must use a web engine like https://doc.qt.io/qt-5/qml-qtwebengine-webengineview.html

Quang Phu

@JKSH got it.
I am trying to use WebView instead, It looks good in desktop app. But I want to view a html file in my app Resources on android device.
I created an example for android, it shows an error: Webpage not available. How can I deal with this??
Screenshot from 2020-03-05 12-48-56.png

This is sample code:

import QtQuick 2.14
import QtQuick.Window 2.14
import QtWebView 1.0

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    Rectangle {
        anchors.fill: parent
        color: "lightblue"
        WebView {
            anchors.fill: parent
            url: ":/AAnThe.html"
        }
    }
}

JonB

@JKSH said in How to use border-color and border-collapse in html table?:

The supported tags are listed at https://doc.qt.io/qt-5/richtext-html-subset. border-color and border-collapse are not supported.

https://doc.qt.io/qt-5/richtext-html-subset.html#css-properties :

border-collapse collapse | separate Border Collapse mode for text tables. If set to collapse, cell-spacing will not be applied.
border-color <color> Border color for text tables and table cells.

JKSH

@JonB said in How to use border-color and border-collapse in html table?:

@JKSH said in How to use border-color and border-collapse in html table?:

The supported tags are listed at https://doc.qt.io/qt-5/richtext-html-subset. border-color and border-collapse are not supported.

https://doc.qt.io/qt-5/richtext-html-subset.html#css-properties :

border-collapse collapse | separate Border Collapse mode for text tables. If set to collapse, cell-spacing will not be applied.
border-color <color> Border color for text tables and table cells.

Well, that's very embarrassing. Whoops!

Anyway, the problem is invalid HTML code. If you put the original code in a .html file, a web browser won't render it correctly either. border-collapse and border-color are CSS properties, not HTML attributes.

Wrong: <table border-color="red">
Correct: <table style="border-color:red">

JonB

@JKSH Damn good point :) Couldn't see the wood for the trees....