Непрозрачный белый фон, но сохраняйте границы на столе - PullRequest
Новая
       23

Непрозрачный белый фон, но сохраняйте границы на столе

0 голосов
/ 27 апреля 2020

Я почти успешно сделал левые столбцы моей таблицы липкими, так что остальные можно прокручивать. Это, однако, создало новую проблему: фон таблицы имеет белый цвет, что означает, что прокрученные ячейки проходят под липкими ячейками (см. Скриншот 1). Чтобы решить эту проблему, я сделал фон липких ячеек непрозрачным, используя background-color: rgba(255, 255, 255, 1.0);. Но это также удаляет границы липких ячеек (см. Скриншот 2). Оба варианта ужасны.

Я пытался добавить border:1px solid #cdcdcd; (даже добавив !important) в липкие ячейки, но границы все еще не видны. Любые предложения?

Вот полное форматирование, примененное к таблице: 

div#scrollable {
   overflow-x: scroll;
}
table#stats {
   border-collapse:collapse;
   width:100%;
}
table#stats th.sticky, td.sticky {
   position: -webkit-sticky; /* for Safari */
   position: sticky;
   left: 0;
}
table#stats td.sticky {
   background-color: rgba(255, 255, 255, 1.0);
   border:1px solid #cdcdcd !important;
}
table#stats tr#means {
   background-color:#ddffd5;
}
table#stats td.stats {
   border:1px solid #cdcdcd;
}

прозрачные липкие ячейки непрозрачные липкие ячейки

1 Ответ

0 голосов
/ 27 апреля 2020

Я не нашел другого решения, кроме этого 

th.sticky:after, td.sticky:after{
    content : "";
    position: absolute;
    bottom: 0;
    display: block;
    width: 100%;
    height: 1px;

    background-color: #cdcdcd;
}

РЕДАКТИРОВАТЬ: Другое решение здесь Сообщение переполнения стека

...