ScrollBar QStyleSheet displayed with a background when It should be transparent

I’m trying to style the scroll bar of a QtTableWidget so the part where the “scrolling part” isn’t on the bar is transparent so the scrollbar would be of the color of the background and the scrolling part (where you put your mouse) is the only part whose color is different from the background.

I tried this as a stylesheet:

QTableWidget {
    background-color:rgb(57, 57, 57);
    color:rgb(255,255,255);
    border-radius:3px;
}

QScrollBar:vertical {
    border: none;
    background: rgb(45, 45, 68);
    width: 14px;
    margin: 15px 0 15px 0;
    border-radius: 0px;
 }

/*  HANDLE BAR VERTICAL */
QScrollBar::handle:vertical {   
    background-color: rgb(80, 80, 122);
    min-height: 30px;
    border-radius: 7px;
}

But when the windows is displayed the part I want to be transparent is filled with a white tilled background like that :

I’m not sure what causes this issue in my Stylesheet.

Here is the code to reproduce the window :

from PySide2.QtCore import (QCoreApplication, QMetaObject, QObject, QPoint,
    QRect, QSize, QUrl, Qt)
from PySide2.QtGui import (QBrush, QColor, QConicalGradient, QCursor, QFont,
    QFontDatabase, QIcon, QLinearGradient, QPalette, QPainter, QPixmap,
    QRadialGradient)
from PySide2.QtWidgets import *


class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        if MainWindow.objectName():
            MainWindow.setObjectName(u"MainWindow")
        MainWindow.resize(800, 600)
        self.centralwidget = QWidget(MainWindow)
        self.centralwidget.setObjectName(u"centralwidget")
        self.tableWidget = QTableWidget(self.centralwidget)
        if (self.tableWidget.rowCount() < 100):
            self.tableWidget.setRowCount(100)
        self.tableWidget.setObjectName(u"tableWidget")
        self.tableWidget.setGeometry(QRect(30, 30, 721, 461))
        self.tableWidget.setStyleSheet(u"QTableWidget {n"
"   background-color:rgb(57, 57, 57);n"
"   color:rgb(255,255,255);n"
"   border-radius:3px;n"
"}n"
"n"
"QScrollBar:vertical {n"
"   border: none;n"
"    background: rgb(45, 45, 68);n"
"    width: 14px;n"
"    margin: 15px 0 15px 0;n"
"   border-radius: 0px;n"
" }n"
"n"
"/*  HANDLE BAR VERTICAL */n"
"QScrollBar::handle:vertical {  n"
"   background-color: rgb(80, 80, 122);n"
"   min-height: 30px;n"
"   border-radius: 7px;n"
"}n"
"QScrollBar::handle:vertical:hover{ n"
"   background-color: rgb(255, 0, 127);n"
"}n"
"QScrollBar::handle:vertical:pressed {  n"
"   background-color: rgb(185, 0, 92);n"
"}")
        self.tableWidget.setRowCount(100)
        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QMenuBar(MainWindow)
        self.menubar.setObjectName(u"menubar")
        self.menubar.setGeometry(QRect(0, 0, 800, 26))
        MainWindow.setMenuBar(self.menubar)
        self.statusbar = QStatusBar(MainWindow)
        self.statusbar.setObjectName(u"statusbar")
        MainWindow.setStatusBar(self.statusbar)


        QMetaObject.connectSlotsByName(MainWindow)


class MainWindow(QMainWindow):
    
    def __init__(self):
        QMainWindow.__init__(self)
        self.ui = Ui_MainWindow()
        self.ui.setupUi(self)


import sys
app = QApplication(sys.argv)
window = MainWindow()
window.show()
sys.exit(app.exec_())

Answer

Try it:

'''
from PySide2.QtCore import (QCoreApplication, QMetaObject, QObject, QPoint,
    QRect, QSize, QUrl, Qt)
from PySide2.QtGui import (QBrush, QColor, QConicalGradient, QCursor, QFont,
    QFontDatabase, QIcon, QLinearGradient, QPalette, QPainter, QPixmap,
    QRadialGradient)
from PySide2.QtWidgets import *
'''
from PyQt5.Qt import *


class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        if MainWindow.objectName():
            MainWindow.setObjectName(u"MainWindow")
        MainWindow.resize(800, 600)
        self.centralwidget = QWidget(MainWindow)
        self.centralwidget.setObjectName(u"centralwidget")
        self.tableWidget = QTableWidget(self.centralwidget)
        if (self.tableWidget.rowCount() < 100):
            self.tableWidget.setRowCount(100)
        self.tableWidget.setObjectName(u"tableWidget")
        self.tableWidget.setGeometry(QRect(30, 30, 721, 461))
        
#        self.tableWidget.setStyleSheet('''
        MainWindow.setStyleSheet('''
            QTableWidget {
                background-color:rgb(57, 57, 57);
                color:rgb(255, 255, 255);
                border-radius:3px;
            }
                        
            /* VERTICAL SCROLLBAR */
            QScrollBar:vertical {
                border: none;
                background: rgb(45, 45, 68);
                width: 14px;
                margin: 15px 0 15px 0;
                border-radius: 0px;
            }
            /*  HANDLE BAR VERTICAL */
            QScrollBar::handle:vertical {
                background-color: rgb(80, 80, 122);
                min-height: 30px;
                border-radius: 7px;
            }
            QScrollBar::handle:vertical:hover {
                background-color: rgb(255, 0, 127);
            }
            QScrollBar::handle:vertical:pressed {
                background-color: rgb(185, 0, 92);
            }
            /* BTN TOP - SCROLLBAR */
            QScrollBar::sub-line:vertical {
                border: none;
                background-color: rgb(59, 59, 90);
                height: 15px;
                border-top-left-radius: 7px;
                border-top-right-radius: 7px;
                subcontrol-position: top;
                subcontrol-origin: margin;
            }
            QScrollBar::sub-line:vertical:hover {
                background-color: rgb(255, 0, 127);
            }
            QScrollBar::sub-line:vertical:pressed {
                background-color: rgb(185, 0, 92);
            }

            /* BTN BOTTOM - SCROLLBAR */
            QScrollBar::add-line:vertical {
                border: none;
                background-color: rgb(59, 59, 90);
                height: 15px;
                border-bottom-left-radius: 7px;
                border-bottom-right-radius: 7px;
                subcontrol-position: bottom;
                subcontrol-origin: margin;
            }
            QScrollBar::add-line:vertical:hover {
                background-color: rgb(255, 0, 127);
            }
            QScrollBar::add-line:vertical:pressed { 
                background-color: rgb(185, 0, 92);
            }


/* RESET ARROW  vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv       */
            QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical {
                background: none;
            }
            QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
                background: none;
            }
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^       */
       
        ''')
        self.tableWidget.setRowCount(100)
        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QMenuBar(MainWindow)
        self.menubar.setObjectName(u"menubar")
        self.menubar.setGeometry(QRect(0, 0, 800, 26))
        MainWindow.setMenuBar(self.menubar)
        self.statusbar = QStatusBar(MainWindow)
        self.statusbar.setObjectName(u"statusbar")
        MainWindow.setStatusBar(self.statusbar)

        QMetaObject.connectSlotsByName(MainWindow)


class MainWindow(QMainWindow):
    def __init__(self):
        QMainWindow.__init__(self)
        self.ui = Ui_MainWindow()
        self.ui.setupUi(self)


import sys
app = QApplication(sys.argv)
window = MainWindow()
window.show()
sys.exit(app.exec_())