テーブルのセル間の間隔をシミュレートして、垂直方向と水平方向の間隔が異なるようにすることはできますか？

Question

CSSでは、テーブルのborder-spacingプロパティを使用して、テーブルセル間の間隔を指定できます。

ただし、これにより列と行の間隔が均一になり、使用しているデザインで行と列の間ではなく、またはその逆のギャップが必要になる状況が増えています。

無地の背景がある場合、背景色と同じ色の境界線を使用して間隔をシミュレートできます。

また、すべてのテーブルセルの最初の子としてdivを作成し、パディングまたはマージンを使用して目的の結果を取得することもできますが、これはスタイルに対応するためだけの余分なマークアップです。

表示しているデータが表形式のデータであることを考えると、テーブルを使用してこのスタイルを実現する賢明な方法はありますか？

Answer 1

border-spacing または関連するプロパティの水平方向と垂直方向のエッジに異なる間隔を指定できます 。複数の測定を指定するだけです。例：

border-spacing: 1px 2px;

Answer 2

一般的なケース では、プロパティにグローバルまたは個別に適用できるカロリーを指定できます（たとえば、「パディング」）、単純なパターンに従います。

• 単一の値を指定した場合（例： padding：2px; ）値が適用されます 上下左右に オブジェクトの。

• 2つの値を指定した場合（例： パディング：2px 7px; ）最初の値 上下に適用され、 左右の2番目。

• 3つの値を指定すると、 最初の値が上部に適用され、 左側の2番目の値および 正しい、そして最終的な価値 下。

• 4つの値を指定した場合（例： パディング：1px、2px、3px、4px; ） 値は上、右、 下、その順序のまま（TRouBLeという単語を使用して順序を覚えておいてください）。