È possibile simulare la spaziatura tra le celle della tabella in modo tale che la spaziatura verticale e quella orizzontale siano diverse?

Question

In CSS, puoi specificare la spaziatura tra le celle della tabella usando la proprietà di spaziatura dei bordi di una tabella.

Tuttavia, ciò si traduce in una spaziatura uniforme tra colonne e righe e sto trovando più situazioni in cui i disegni che sto usando richiedono spazi tra le righe, ma non colonne, o viceversa.

Se ho uno sfondo solido, posso simulare la spaziatura usando i bordi dello stesso colore del colore di sfondo.

Potrei anche fare di un div (ad esempio) il primo figlio di ogni cella di una tabella, e usando il padding o i margini per ottenere i risultati desiderati, ma questo è un sacco di markup extra solo per adattarsi allo stile.

Dato che i dati che sto visualizzando sono dati tabulari, esiste un modo ragionevole per ottenere questo stile usando le tabelle?

Answer 1

Puoi puoi specificare spaziature diverse per i bordi orizzontali e verticali per spaziatura dei bordi o proprietà correlate. Basta specificare più di una misurazione. per es.,

border-spacing: 1px 2px;

Answer 2

Nel caso generale in cui è possibile specificare i valori che possono essere applicati globalmente o individualmente su una proprietà (ad esempio, "riempimento",) seguire un modello semplice .

• Se specifichi un singolo valore (ad es. padding: 2px; ) viene applicato il valore in alto, in basso, a sinistra e a destra dell'oggetto.

• Se si specificano due valori (ad es. imbottitura: 2px 7px; ) il primo valore viene applicato in alto e in basso e il secondo a sinistra e a destra.

• Se si specificano tre valori, il il primo valore viene applicato all'inizio, il secondo valore a sinistra e giusto, e il valore finale per il in basso.

• Se specifichi quattro valori (ad es. padding: 1px, 2px, 3px, 4px; ) il i valori vengono applicati in alto, a destra, in basso, a sinistra in quell'ordine (ricorda l'ordine usando la parola TRouBLe).