I am experiencing an issue with the table, which can be seen in this image :
https://i.sstatic.net/QMEsv.png
Each row in the table has a color (all green in this case), but cells with overflow (scroll) seem to have trouble maintaining the cell's color. A peculiar observation is that the colors appear below the table (near the "Légende" button).
Below is a snippet of my CSS:
table {
table-layout: fixed;
width: 100%;
}
table tr td{
overflow: scroll;
overflow-y: hidden;
overflow-x: auto;
white-space: nowrap;
}
td::-webkit-scrollbar-thumb {
-webkit-border-radius: 2px;
-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.5);
background: transparent;
}
td::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,255,255,0.3);
}
td::-webkit-scrollbar-track {
background: transparent;
border: 0;
}
::-webkit-scrollbar-corner {
background: transparent;
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-thumb:hover {
background: #838383;
}
::-webkit-scrollbar-thumb:active {
background: #6a6a6a;
}
tr {
background-color: rgb(xx, xx, xx);
display: tabl-row;
}
I'm unsure if this issue is due to my CSS or if it's a bug specific to smaller screens like tablets when using Chrome. The problem does not occur on a laptop screen with the same browser.