Cells with overflow can't keep color on Tablet

Question

There is a bug with my table as you can see on this image :

Each row has a color (they are all green here) but the cells with an overflow (scroll) seem to have problems keeping the color of the cell. You can notice something strange : the colors are below the table (where the "Légende" button is).

A part 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;
}

Do you know if it's a problem with my CSS or a bug because I'm on a smaller screen (Tablet, using Chrome). There is no problem on a laptop screen (Chrome as well).

score 1 · Accepted Answer · edited May 23 '17 at 12:19

1

Overflow scroll directly cannot be applied to td tag. So, nest a block-level div with the overflow:scroll property set inside the td tag. Like this:

<td><div style="overflow:scroll;">Content</div></td>

You can refer to this Similar problem here

edited May 23 '17 at 12:19

Community

1
1

answered Sep 28 '16 at 12:15

Kshri

414
3
16

You are right, I need a div inside the td tag. There is no bug anymore ! Thank you. – PASQUIER Corentin Sep 29 '16 at 13:15

Cells with overflow can't keep color on Tablet

1 Answers1