Pergunta do WordPress TablePress: borda e sombra da tabela

Um usuário perguntou 👇

Olá Tobias,

Eu quero limitar minha mesa em 5px e sombra com 5px de desfoque.

Eu tentei o seguinte CSS sem sorte;

.tablepress-id-1 { limite: 1px sólido #e2e2e2; raio da borda: 5px 5px 5px 5px; } .tablepress-id-1 { box-shadow: 0 0 5px 0 rgba (0,0,0,0.12); }

O raio do limite não muda e a sombra não funciona totalmente.

Veja o link para referência

Saúde

(@tobiasbg)

1 ano, 11 meses atrás

Olá,

Obrigado por sua pergunta e desculpe o transtorno.

O problema aqui é que a mesa já tem 100% de largura e a sombra da caixa é cortada do container externo. Você pode tentar reduzir um pouco a largura da tabela:

.dataTables_wrapper .tablepress-id-1 {
    width: calc(100% - 10px) !important;
    margin: 0 auto !important;
}

Abraços, Tobias

(@amanfre)

1 ano, 11 meses atrás

Olá, obrigado pela resposta rápida.

Isso funcionou para sombra, mas no topo da tabela não parece ter uma conexão de referência de sombra

Além disso, o raio do limite não muda, ele ainda tem bordas quadradas.

(@tobiasbg)

1 ano, 11 meses atrás

Olá,

oh oh, eu perdi essa parte. Infelizmente, é um pouco mais difícil colocar mesas nos cantos. Você pode usar esta abordagem (adaptada às classes SEC corretas):

Abraços, Tobias

(@amanfre)

1 ano, 11 meses atrás

Obrigado por isso. De volta à fronteira. A sombra é visível, mas não na borda superior. Você sabe por que seria assim?

Como remover o limite de widgets de filtro de coluna? Eu só quero uma sombra sobre eles.

(@tobiasbg)

1 ano, 11 meses atrás

Olá,

pode ser necessário adicionar uma margem superior e inferior:

margin: 10px auto !important;

em vez de

margin: 0 auto !important;

Abraços, Tobias

(@amanfre)

1 ano, 11 meses atrás

Funcionou obrigado e, finalmente, como os limites dos widgets de filtro de coluna podem ser removidos? Eu só quero uma sombra sobre eles.

(@tobiasbg)

1 ano, 11 meses atrás

Olá,

Tente

.column-filter-widget select {
    border: none;
}

Você também pode conferir como trabalhar com as ferramentas de desenvolvedor em seu navegador (recomendo as do Chrome). Estes permitem que você teste tudo isso ao vivo.

Abraços, Tobias

Isto foi útil?

0 / 0

Deixe uma resposta 0

O seu endereço de email não será publicado. Campos obrigatórios são marcados *