Ist es möglich zu simulieren, Abstand zwischen den Zellen in einer Tabelle, so dass die vertikalen und horizontalen Abstände unterschiedlich sind?

Question

In CSS können Sie die Abstände zwischen Tabellenzellen mit den border-spacing-Eigenschaft einer Tabelle.

Jedoch, diese Ergebnisse in gleichmäßige Abstände zwischen Spalten und Zeilen, und ich bin der Suche nach mehr Situationen, in denen die Entwürfe bin ich mit dem Anruf für die Lücken zwischen den Zeilen, aber nicht Spalten, oder Umgekehrt.

Wenn ich einen soliden hintergrund, ich kann simulieren Abstand mithilfe Grenzen der gleichen Farbe wie die Hintergrundfarbe.

Ich könnte auch ein div (zum Beispiel) das erste Kind aus jeder Zelle der Tabelle, und verwenden Sie entweder Polsterung oder Ränder die gewünschten Ergebnisse zu erhalten, aber das ist eine Menge extra markup nur, um Platz für den Stil.

Gegeben, dass die Daten, die ich bin ist die Anzeige tabellarischer Daten, ist es eine vernünftige Möglichkeit, dies zu erreichen Stil mit Tabellen?

Answer 1

Sie können angeben unterschiedliche Abstände für horizontale und vertikale Kanten für border-spacing oder verwandte Eigenschaften. Geben Sie einfach mehr als eine Messung. z. B.

border-spacing: 1px 2px;

Answer 2

In der allgemeiner Fall wo können Sie calues thayt angewendet werden kann Global oder individuell auf eine Eigenschaft (zum Beispiel "padding"), Folgen Sie einem einfachen Muster.

• Wenn Sie einen Wert angeben (z.B.padding:2px;) der Wert gilt nach oben, unten, Links und rechts des Objekts.

• Geben Sie zwei Werte (z.B.padding:2px 7px;) der erste Wert wird angewandt, um die oben und unten und die zweite nach Links und rechts.

• Geben Sie drei Werte, die ersten Wert angewendet wird, um die top, der zweite Wert auf der linken Seite und rechts und der Letzte Wert der unten.

• Wenn Sie vier Werte (z.B.padding:1px,2px,3px,4px;) die Werte angewendet werden, um die oben, rechts, unten, von Links in dieser Reihenfolge (die Reihenfolge erinnern die Verwendung des Wortes Schwierigkeiten).