Как предотвратить появление липкого заголовка таблицы, отображающего горизонтально прокручиваемое содержимое на границе? ⇐ CSS

[Anonymous]

Я хочу, чтобы красные заголовки не отображались на границе синего заголовка при горизонтальной прокрутке. У синих заголовков должна быть белая рамка.

Код: Выделить всё

.container {
overflow: auto;
width: 200px;
}

table {
border-collapse: collapse;
}

th {
background-color: red;
border-right: 1px solid white;
color: white;
padding: 10px;
z-index: 1;
}

.sticky {
background-color: blue;
position: sticky;
z-index: 2;
}

.test1 {
left: 0;
}

.test2 {
left: 57px;
}

.test3 {
left: 114px;
}

Код: Выделить всё

Test1


Test2


Test3


Test4


Test5


Test6

Я хочу, чтобы красные заголовки не отображались в границах синего заголовка, когда прокрутка по горизонтали. У меня должна быть белая рамка в синих заголовках.

Подробнее здесь: https://stackoverflow.com/questions/784 ... tent-in-th