Olá boa tarde. Estou vendo o link: https://jsfiddle.net/qwubvg9m/1/ E ele faz o que preciso, bem mais ou menos. Gostaria de saber como faço para congelar a segunda coluna de acordo com o que mostra no código, tem como me dar uma ideia de como fazer para congelar a segunda coluna? Agradeço.
Consegui congelar a segunda coluna veja: https://prnt.sc/119tvxj Porém estou com um problema, é que a coluna congelada fica por cima do cabeçalho, como faço para que o cabeçalho fique por cima dela? Código usado no CSS:
div {
max-width: 40em;
max-height: 20em;
overflow: scroll;
position: relative;
}
table {
position: relative;
border-collapse: collapse;
}
td,
th {
padding: 0.25em;
}
thead th {
position: -webkit-sticky; /* for Safari */
position: sticky;
top: 0;
background: #000;
color: #FFF;
}
thead th:first-child {
left: 0;
z-index: -1;
}
tbody td:nth-child(2){
left: 0;
z-index: 1;
}
tbody td:nth-child(2){
position: -webkit-sticky; /* for Safari */
position: sticky;
left: 0;
background: #FFF;
border-right: 1px solid #CCC;
}
td:nth-child(2){
color: DeepPink;
}Observação: estou usando o link acima, mudei somente o css, agradeço qualquer ajuda.
Pode deixar, já consegui.
div { max-width: 40em; max-height: 20em; overflow: scroll; position: relative; }
table { position: relative; border-collapse: collapse; }
td, th { padding: 0.25em; }
thead th { position: -webkit-sticky; /* for Safari */ position: sticky; top: 0; background: #000; color: #FFF; }
thead th:first-child { left: 0; z-index: 2; }
thead th:nth-child(2) { left: 0; z-index: 2; }
tbody td:nth-child(2){ position: -webkit-sticky; /* for Safari */ position: sticky; left: 0; background: #fff; border-right: 1px solid #CCC; z-index: 1;
}
td:nth-child(2){ color: DeepPink; background: #FFF; }
O código usado foi este. =)
Fala ai Shellen, tudo bem? Muito bom, parabéns pela solução.
Sempre que precisar não deixe de criar suas dúvidas.
Abraços e bons estudos.