Personalização de estilos de tabela

O trecho CSS de estilos de mudança de tabela permite que você aplique estilos consistentes a todas as tabelas da sua base de conhecimento – incluindo bordas, preenchimento de volume, cor de fundo do cabeçalho e cores alternadas de linha. Por padrão, as tabelas no Document360 usam um estilo minimalista com bordas básicas. Esse trecho oferece um ponto de partida pronto que você pode modificar para combinar com sua marca.

Como aplicar o trecho de estilos de tabela

1. Navegue até Configurações () > Site da base de conhecimento na barra de navegação esquerda do portal da Base de Conhecimento.
2. No painel de navegação à esquerda, navegue até Personalização do Site.

3. Clique em CSS & JavaScript Personalizados.
4. Selecione a aba CSS , depois clique em Adicionar trechos de código no canto superior direito.
5. Clique em Alterar estilos de tabela. O trecho é inserido no editor CSS.

6. Modifique os valores de cor, larguras das bordas e valores de preenchimento para atender aos seus requisitos.
7. Clique em Ctrl + S ou salvar.

Como adicionar CSS de tabela personalizada

Você também pode escrever seu próprio CSS de tabela em vez de usar o snippet pré-carregado. Por exemplo:

table th, table td {
  border: 1px solid #67cfbf;
  padding: 2px 10px;
}
table th {
  background: #fcf8c0;
  font-weight: 600;
}
table th:empty {
  display: none;
}
tbody tr:nth-child(odd) {
  background-color: #f2f2f2;
}

Melhores práticas

• Use cores alternadas para linhas para legibilidade – a nth-child(odd) regra aplica uma cor de fundo em linhas alternadas, facilitando a digitalização de tabelas largas entre linhas.
• Mantenha as cores das bordas sutis – uma cor clara (por exemplo, #e0e0e0) geralmente é menos barulhenta visualmente do que uma cor forte, especialmente para tabelas com muitas colunas.
• Teste com tabelas esparsas e densas – suas escolhas de preenchimento e tamanho de fonte podem parecer boas em uma tabela pequena, mas criar problemas de alinhamento em uma tabela com muitas colunas ou conteúdo de células longas.

FAQ

.no-border-table table tr,
.no-border-table table th,
.no-border-table table td {
    border: none;
}