☰

CSS でセルパディングとセル間隔を設定しますか? 質問する

tag-icon • tag-icon html css html-table alignment
CSS でセルパディングとセル間隔を設定しますか? 質問する

HTML テーブルでは、cellpaddingおよび はcellspacing次のように設定できます。

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

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

ベストアンサー1

基礎

paddingCSS で「cellpadding」を制御するには、テーブル セルで次のようにします。たとえば、「cellpadding」を 10px にするには、次のようにします。

td, th { /* table cells */
    padding: 10px;
}

border-spacing「cellspacing」の場合、テーブルに CSS プロパティを適用できます。たとえば、「cellspacing」が 10px の場合:

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

このプロパティを使用すると、従来の「セル間隔」ではできなかった、水平方向と垂直方向の間隔を個別に設定することもできます。

IE ≤ 7 の問題

これは、Internet Explorer 7 までを除く、ほぼすべての一般的なブラウザで機能します。Internet Explorer 7 では、ほとんど機能しません。「ほぼ」と言うのは、これらのブラウザが、隣接するテーブル セルの境界を結合する プロパティをまだサポートしているからです。cellspacing (つまり、 )border-collapseを削除しようとしている場合は、同じ効果が得られるはずです。つまり、テーブル セル間にスペースがなくなります。ただし、このサポートにはバグがあり、テーブル要素の既存の HTML 属性を上書きしません。cellspacing="0"border-collapse:collapsecellspacing

つまり、Internet Explorer 5-7 以外のブラウザでは、border-spacingで対応できます。Internet Explorer の場合、状況が適切であれば (セル間隔を 0 にしたいが、テーブルにまだ定義されていない場合)、 を使用できますborder-collapse:collapse。

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

注: テーブルに適用できるCSSプロパティと、どのブラウザに適用できるかについては、こちらをご覧ください。素晴らしいQuirksmodeページ。

おすすめ記事