[解決済み] CSSでcellpaddingとcellspacingを設定する？

質問

HTMLのテーブルでは cellpadding と cellspacing はこのように設定することができます。

<table cellspacing="1" cellpadding="1">

CSSを使って同じことを実現するにはどうすればよいのでしょうか。

どのように解決するのですか？

基本的なこと

CSSでセルパディングを制御するには、単純に次のようにします。 padding をテーブルのセルに追加します。例："cellpadding"を10pxにする場合。

td { 
    padding: 10px;
}

cellspacing"の場合は、quot;cellspacing"を適用することができます。 border-spacing CSSプロパティをテーブルに設定します。例："cellspacing"を10pxにする場合。

table { 
    border-spacing: 10px;
    border-collapse: separate;
}

このプロパティは、旧来の "cellspacing" ではできなかった、水平方向と垂直方向の個別のスペーシングも可能にします。

IE ≤ 7における問題点

これは、Internet Explorer 7までのInternet Explorerを除く、ほとんどの一般的なブラウザで動作します。なぜなら、これらのブラウザはまだ border-collapse プロパティは、隣接するテーブルセルの境界線を統合するものです。もし、セルスペースをなくそうとするならば（つまり。 cellspacing="0" ) の場合 border-collapse:collapse は、テーブルセル間のスペースをなくすという、同じ効果を持つはずです。しかし、このサポートはバグがあり、既存の cellspacing table 要素の HTML 属性。

要するに、Internet Explorer 5-7 以外のブラウザの場合。 border-spacing が処理します。Internet Explorerの場合、もしあなたの状況が適切であれば（セル間隔を0にしたいのにテーブルにそれがすでに定義されていない）、次のように使うことができます。 border-collapse:collapse .

table { 
    border-spacing: 0;
    border-collapse: collapse;
}

注：テーブルに適用できる CSS プロパティの概要と、どのブラウザに適用できるかは、以下を参照してください。 Quirksmodeのページ .