CODEWITHSUNDEEP
c++qtqtablewidgetqtstylesheetsqheaderview
j123b567
j123b567

Reputation: 3439

QTableView/QTableWidget grid stylesheet - grid line width

I would like to display a table in Qt with a specific style. I want to draw all grid lines with same color and same width.

Problem is, that it is hard to style QHeaderView. All the time, I get a 2px grid width or no grid at all.

I have the following window with one QTableWidget:

QTableWidget

and associated stylesheet:

QWidget {
    background-color: #333333;
    color: #fffff8;
}

QHeaderView::section {
    background-color: #646464;
    padding: 4px;
    border: 1px solid #fffff8;
    font-size: 14pt;
}

QTableWidget {
    gridline-color: #fffff8;
    font-size: 12pt;
}

QTableWidget QTableCornerButton::section {
    background-color: #646464;
    border: 1px solid #fffff8;
}

Are there any tricks to have all grid lines 1px width? I'm using Qt 4.8.5, and I can't upgrade to versions 5.x.

Upvotes: 12

Views: 43521

Answers (2)

pmpod
pmpod

Reputation: 379

I think what you did is you added additional borders for section cells, and the section properties should look like that (although I did not try this solution).

QHeaderView::section {
    background-color: #646464;
    padding: 4px;
    border: 0px;
    font-size: 14pt;
}

For more information how to style your headers, see:

  • 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);
}
*/

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);
}

  • How to draw correct headerview border using stylesheets

Upvotes: 3

j123b567
j123b567

Reputation: 3439

The trick is border-style: none; in QHeaderView::section after witch border-left, border-right, border-top and border-bottom starts working. Correct style for QHeaderView::section should be:

QHeaderView::section {
    background-color: #646464;
    padding: 4px;
    font-size: 14pt;
    border-style: none;
    border-bottom: 1px solid #fffff8;
    border-right: 1px solid #fffff8;
}

QHeaderView::section:horizontal
{
    border-top: 1px solid #fffff8;
}

QHeaderView::section:vertical
{
    border-left: 1px solid #fffff8;
}

Upvotes: 12

Related Questions