web-dev-qa-db-ja.com

テーブルのパディングが機能しない

本文とその他のコンテンツで満たされた親div内にあるテーブルがあります。動作していないように見える次のCSSがあります。

table {width:100%; padding: 0 50px 0 50px;}

パディングの代わりにマージンを使用すると、それは機能します。ただし、width：100％で、マージンを使用すると、すべてが親divからスクートされます。幅を小さくしたり、正確なピクセル量を指定したりできると思いますが、サイトの残りの部分は画面サイズに合わせてスケーリングされるので、これも同様に機能させたいと思います。

htmlcssmarginpaddingcss-tables
13
Hank

テーブルに関連するいくつかの特別なプロパティがあります。探しているのはborder-spacingです。

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 50px;
}

例： http://jsfiddle.net/feeela/fPuQ6/

UPDATE：自分のバイオリンで遊んだ後、「テーブルにはパディングがない」と言って間違えたことを認めなければなりません。少なくともChromeおよびOpera（12）。次のスニペットもあなたが欲しがっているはずです。

table {
    width: 100%;
    padding: 0 50px 0 50px;
}

フィドルの更新版を参照してください： http://jsfiddle.net/feeela/fPuQ6/3/

それにもかかわらず、display: block;を持つ要素のように、なぜパディングが幅に追加されないのか疑問に思っています。

こちらもご覧ください：

20
feeela

前の答えは、cssがea方向にborder- [direction]を個別に設定できることを示しています。しかし、古いスタイルのtable cellpadding="7" border="1"を複製するはるかに単純なCSSのみのソリューションは次のようになります。 CSSで：

table { 
  border-collapse:collapse;
  width: 100%;
}
td {
  padding: 7px;
  border:1px solid;
}

このフィドルに示されている： http://jsfiddle.net/b5NW5/77

3
murspieg

テーブル定義にセルのパディングを追加することができますOR CSSを使用したい場合、これを試すことができます：

CSSを使用する場合：

<style type="text\css">
.table {
        width: 100%;        
        border-top:1px solid red;
        border-right:1px solid red;
        border-collapse:collapse;
    }
.table td {
    padding: 7px;
    border-bottom:1px solid red;
    border-left:1px solid red;
}
</style>

<table class="table">
    <tr><td>Cell1a</td><td>Cell1b</td><td>Cell1c</td></tr>
    <tr><td>Cell2a</td><td>Cell2b</td><td>Cell2c</td></tr>
    <tr><td>Cell3a</td><td>Cell3b</td><td>Cell3c</td></tr>
</table>


インラインを使用する場合：

<table cellpadding="9" cellspacing="5" style="border-collapse:collapse;" border="1">
    <tr><td>Cell1a</td><td>Cell1b</td><td>Cell1c</td></tr>
    <tr><td>Cell2a</td><td>Cell2b</td><td>Cell2c</td></tr>
    <tr><td>Cell3a</td><td>Cell3b</td><td>Cell3c</td></tr>
</table>

こちらで実際に動作を確認できます： http://jsfiddle.net/b5NW5/1/

それが役に立てば幸い

2
kheya

これが理由です。

[〜＃〜] mdn [〜＃〜] から、テーブルでパディングを使用するには、許可するために_border-collapse: separate;_が必要です_border-spacing_を使用する場合は、_border-spacing_が外側のテーブルEdgeと外側のセルのEdge間の距離の計算の要因であるため（ [〜 ＃〜] mdn [〜＃〜] 以下）。その後、paddingに値を割り当てることができます。 _border-spacing: 0px;_を設定して、パディングへの_border-spacing_の追加をキャンセルすることもできます。

Border-spacing CSSプロパティは、隣接するセルの境界間の距離を設定します。このプロパティは、border-collapseが分離されている場合にのみ適用されます。

境界線間隔値は、テーブルの外側のエッジに沿って使用されます。テーブルの境界線と最初/最後の列または行のセル間の距離は、関連する（水平または垂直）境界線間隔とテーブルの関連する（上、右、下、または左）パディング。

0
Ozichukwu