web-dev-qa-db-ja.com

CSSでテーブルのパディングをどのように指定しますか？ （セルパディングではなくテーブル）

背景が色付きのテーブルがあり、テーブルとそのコンテンツの間のパディングを指定する必要があります。セル。
テーブルタグはパディング値を受け入れないようです。
Firebugは、パディング0でテーブルとtbodyのレイアウトを表示しますが、入力された値を受け入れないため、パディングプロパティがありません。
しかし、問題は、テーブルの上部にある最上部のセルと、テーブルの下部にある下部のセルよりも同じセル間の分離が必要なことです。
繰り返しますが、欲しいのはセルパディングではありません。

編集：ありがとう、私が本当に必要なのは、ボーダースペース、またはそのHTMLに相当するセルスペースであると今気づいたことです。
しかし、何らかの理由で、彼らは私が取り組んでいるサイトでは何もしません。
どちらも個別のHTMLでうまく機能しますが、サイトでは機能しません。
プロパティを上書きするスタイルだと思っていましたが、セル間隔とインライン境界線間隔は上書きされませんよね？
（Firefoxを使用）

編集2：いいえ、TDパディングは私が必要なものではありません。TDパディング、隣接するセルの上部と下部のパディングが合計されるので、スペースが2倍（実際にはパッド）上のセルとテーブルの上の境界線の間よりも2つのセルの間です。

htmlcsscellpaddingtablelayout
56
Petruza

サポートされている最も簡単/最良の方法は、<table cellspacing="10">

CSSの方法：border-spacing（IEではサポートされていません）

    <!-- works in firefox, opera, safari, chrome -->
    <style type="text/css">
    
    table.foobar {
        border: solid black 1px;
        border-spacing: 10px;
    }
    table.foobar td {
        border: solid black 1px;
    }
    
    
    </style>
    
    <table class="foobar" cellpadding="0" cellspacing="0">
    <tr><td>foo</td><td>bar</td></tr>
    </table>

編集：セルのコンテンツをスペースで埋めずに、単に埋め込みたい場合は、単に使用できます

<table cellpadding="10">

OR

td {
    padding: 10px;
}
42
Rob

テーブルにマージンを設定できます。または、テーブルをdivでラップし、divのパディングを使用します。

25
Frank Schwieterman

テーブルについて理解しておくべきことは次のとおりです。テーブルは、ネストされた独立した要素のツリーではありません。それらは単一の複合要素です。個々のTDは多かれ少なかれCSSブロック要素のように動作しますが、中間のもの（TRとTBODYを含むTABLEとTDの間のもの）は分割不可能であり、inlineまたはblock。その他の次元のスペースでは、ランダムなHTML要素は許可されません。また、そのような他の次元のスペースのサイズは、CSSを介してまったく設定できません。 HTML cellspacingプロパティのみがそれを取得することもでき、そのプロパティはCSSに類似していません。

したがって、あなたの問題を解決するために、別のポスターが示唆するようにDIVラッパーを提案するか、テーブルに絶対に収めなければならない場合は、このいジャンクがあります：

<style>
    .padded tr.first td { padding-top:10px; }
    .padded tr.last td { padding-bottom:10px; }
    .padded td.first { padding-left:10px; }
    .padded td.last { padding-right:10px; }
</style>

<table class='padded'>
    <tr class='first'>
        <td class='first'>a</td><td>b</td><td class='last'>c</td>
    </tr>
    <tr>
        <td class='first'>d</td><td>e</td><td class='last'>f</td>
    </tr>
    <tr class='last'>
        <td class='first'>g</td><td>h</td><td class='last'>i</td>
    </tr>
</table>
24
jpsimons

できない...望みの効果の写真を投稿した場合、それを達成する別の方法があるかもしれません。

たとえば、テーブル全体をDIVでラップし、パディングをdivに設定できます。

6
Seb

おかしい、私は昨日これを正確にやっていた。あなたのCSSファイルでこれが必要です

.ablock table td {
     padding:5px;
}

次に、適切なdivでテーブルをラップします

<div class="ablock ">
<table>
  <tr>
    <td>
5
Cruachan

Cssを使用すると、テーブルはセルとは独立してパディングを行うことができます。

パディングプロパティは、その子には継承されません。

だから、定義：

table {
    padding: 5px;
}

動作するはずです。また、ブラウザにセルの埋め込み方法を指定することもできます（この場合は埋め込みではありません）。

td {
    padding: 0px;
}

編集： IE8ではサポートされていません。ごめんなさい。

2
MPelletier

別のトリックがあります：

/* Padding on the sides of the table */
table th:first-child, .list td:first-child { padding-left: 28px; }
table th:last-child, .list td:last-child { padding-right: 28px; }

（私の現在の仕事で見ました）

2
Offirmo

Border-spacingプロパティを試すことができます。それはあなたが望むことをする必要があります。しかし、あなたはこれを見たいと思うかもしれません answer 。

1
Vincent Ramdhanie

CSSでは、実際にテーブルレベルでこれを行うことはできません。通常、cellspacing="3"この効果を達成したいとき。明らかにcssソリューションではありませんので、価値があるものを選んでください。

1
localshred
table {
    border: 1px solid transparent;
}
0
Anibal Enrique Alvarez Sifonte
table {
    background: #fff;
    box-shadow: 0 0 0 10px #fff;
    margin: 10px;
    width: calc(100% - 20px); 
}
0
Rufina