qtqtableviewqtstylesheetsqtwidgetsqheaderview

How to draw correct headerview border using stylesheets


On the picture represented dialog window with only one widget class QTableWidget. My problem is that bottom border of the header (red square, QHeaderView class) is overlaps with left/right colored borders! What I want, is to make red squares sections view correctly, as green squares.

enter image description here

Zoomed picture:

enter image description here

Here is QSS code from Qt Designer which I'm using:

QTableView#tableWidget QHeaderView::section:horizontal
{
    height: 24px;

    border-style: none;

    border-left: 1px solid #ecedef;
    border-top: 1px solid #161618;
    border-right: 1px solid #b1b1b5;
    border-bottom: 1px solid #161618;

    background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #f4f4f6, stop:1 #ceced6);
 }

/*
QTableView#tableWidget QHeaderView::section:horizontal:first,
QTableView#tableWidget QHeaderView::section:horizontal:last
{
    border-left-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #f4f4f6, stop:1 #ceced6);
}
*/

Solution

  • QTableView#tableWidget QHeaderView
    {
        /* draw the hole hor top & bottom line for the header */
        height: 24px;
    
        border-top: 1px solid #161618;
        border-bottom: 1px solid #161618;
    }
    
    QTableView#tableWidget QHeaderView::section:horizontal:first
    {
        border-left-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #f4f4f6, stop:1 #ceced6);
    }
    
    QTableView#tableWidget QHeaderView::section:horizontal:last
    {
        border-right-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #f4f4f6, stop:1 #ceced6);
    }
    
    QTableView#tableWidget QHeaderView::section:horizontal
    {
        /* for each section draw ONLY left & right lines */
        height: 24px;
    
        border-style: none;
    
        border-left: 1px solid #ecedef;
        border-right: 1px solid #b1b1b5;
    
        background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #f4f4f6, stop:1 #ceced6);
    }
    

    enter image description here