É possível simular o espaçamento entre as células da tabela de tal forma que o espaçamento vertical e horizontal são diferentes?

Question

Em CSS, você pode especificar o espaçamento entre as células da tabela usando a propriedade-espaçamento de borda de uma mesa.

No entanto, isso resulta em espaçamento uniforme entre colunas e linhas, e eu estou encontrando mais situações em que os projetos que estou usando chamada para espaços entre linhas, mas não colunas, ou vice-versa.

Se eu tiver uma sólida formação, posso simular espaçamento usando fronteiras da mesma cor que a cor de fundo.

Eu também poderia fazer uma div (por exemplo) o primeiro filho de cada célula da tabela, e usando preenchimento ou margens para obter os resultados desejados, mas isso é um monte de marcação extra apenas para acomodar o estilo.

Uma vez que que os dados que eu estou mostrando é dados tabulares, há uma maneira sensata para alcançar esse estilo usando tabelas?

Answer 1

Você pode especificar diferentes espaçamentos para bordas horizontais e verticais para border-spacing ou propriedades relacionadas. Basta especificar mais de uma medição. por exemplo.,

border-spacing: 1px 2px;

Answer 2

No caso geral , onde você pode especificar calues ??thayt podem ser aplicadas globalmente ou individualmente em uma propriedade (por exemplo, "padding"), seguem um padrão simples.

• Se você especificar um valor único (por exemplo, padding: 2px; ) O valor é aplicado a parte superior, inferior, esquerda e direita do objeto.

• Se você especificar dois valores (por exemplo, padding: 2px 7px; ) O primeiro valor é aplicado ao topo e fundo e o segundo à esquerda e à direita.

• Se você especificar três valores, o primeiro valor é aplicado ao topo, o segundo valor para a esquerda e certo, e o valor final para o fundo.

• Se você especificar quatro valores (por exemplo, padding: 1px, 2px, 3px, 4px; ) a Os valores são aplicados ao topo, à direita, baixo, da esquerda nessa ordem (lembre-se a ordem usando a palavra problemas).