CSSでセルパディングとセルスペースを設定しますか？

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

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

CSSを使用して同じことをどのように達成できますか？

基本

CSSで「セルパディング」を制御するにはpadding、テーブルセルで単純に使用できます。たとえば、10pxの "cellpadding"の場合：

td { 
    padding: 10px;
}

「セルスペース」の場合、border-spacingCSSプロパティをテーブルに適用できます。たとえば、「セルスペース」の10pxの場合：

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

このプロパティでは、水平方向と垂直方向の間隔を個別に設定することもできます。これは、昔ながらの「セルスペース」ではできなかったものです。

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ページを参照してください。

デフォルト

ブラウザのデフォルトの動作は次と同等です。

table {border-collapse: collapse;}
td    {padding: 0px;}

セルパディング

セルの内容とセルの壁の間のスペースの量を設定します

table {border-collapse: collapse;}
td    {padding: 6px;}

セルスペース

表のセル間のスペースを制御します

table {border-spacing: 2px;}
td    {padding: 0px;}

どちらも

table {border-spacing: 2px;}
td    {padding: 6px;}

両方（特別）

table {border-spacing: 8px 2px;}
td    {padding: 6px;}

注：border-spacing設定されている場合border-collapse、テーブルのプロパティがであることを示しますseparate。

ぜひお試しください！

ここでは、これを実現する古いHTMLの方法を見つけることができます。

table
{
    border-collapse: collapse; /* 'cellspacing' equivalent */
}

table td, table th
{
    padding: 0; /* 'cellpadding' equivalent */
}

テーブルセルにマージンを設定しても、私の知る限り実際には効果がありません。に対応する本当のCSS cellspacingはborder-spacing-ですが、Internet Explorerでは機能しません。

を使用border-collapse: collapseしてセルの間隔を確実に0に設定することはできますが、他の値については、ブラウザー間での唯一の方法はcellspacing属性を使い続けることだと思います。

このハックは、Internet Explorer 6以降、Google Chrome、Firefox、Operaで機能します。

table {
    border-collapse: separate;
    border-spacing: 10px; /* cellspacing */
    *border-collapse: expression('separate', cellSpacing = '10px');
}

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

*宣言は、Internet Explorer 6および7のためであり、他のブラウザでは正しくそれを無視します。

expression('separate', cellSpacing = '10px')が返さ'separate'れますが、JavaScriptの場合のように両方のステートメントが実行され、予想よりも多くの引数を渡すことができ、それらすべてが評価されます。

ゼロ以外のセルスペース値が必要な場合は、次のCSSでうまくいきましたが、Firefoxでしかテストできません。

互換性の詳細については、他の場所に掲載されているQuirksmodeリンクを参照してください。古いバージョンのInternet Explorerでは動作しない可能性があります。

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

この問題の簡単な解決策は次のとおりです。

table
{
    border: 1px solid #000000;
    border-collapse: collapse;
    border-spacing: 0px;
}
table td
{
    padding: 8px 8px;
}

また、必要に応じてcellspacing="0"、スタイルシートに追加することborder-collapse: collapseを忘れないでくださいtable。

セルの内容をdivでラップすると、好きなことができますが、列のすべてのセルをラップして均一な効果を得る必要があります。たとえば、左右のマージンを広くするには、次のようにします。

CSSは

div.cellwidener {
  margin: 0px 15px 0px 15px;
}
td.tight {
  padding: 0px;
}

<table border="0">
  <tr>
    <td class="tight">
      <div class="cellwidener">My content</div>
    </td>
  </tr>
</table>

はい、それは面倒です。はい、Internet Explorerで動作します。実際、私はこれをInternet Explorerでのみテストしました。これは、私たちが仕事で使用できるすべてのことだからです。

ちょうどborder-collapse: collapseあなたのテーブルのpaddingために、thまたはのために使用してくださいtd。

このスタイルは、テーブル（セルパディング、セルスペース、および境界線）を完全にリセットするためのものです。

私は自分のreset.cssファイルにこのスタイルがありました：

table{
    border:0;          /* Replace border */
    border-spacing: 0px; /* Replace cellspacing */
    border-collapse: collapse; /* Patch for Internet Explorer 6 and Internet Explorer 7 */
}
table td{
    padding: 0px; /* Replace cellpadding */
}

TBH。CSSのすべての狂気についてcellpadding="0" cellspacing="0"は、非推奨ではないため、単に使用することもできます...

のマージンを示唆している他の誰も<td>がこれを試したことはありません。

table th,td {
    padding: 8px 2px;
}
table {
    border-collapse: separate;
    border-spacing: 2px;
}

テーブルデータでCSSパディングルールを使用するだけです。

td { 
    padding: 20px;
}

そしてボーダーの間隔について：

table { 
    border-spacing: 1px;
    border-collapse: collapse;
}

ただし、ボックスモデルのdiff実装のため、Internet Explorerなどの古いバージョンのブラウザーでは問題が発生する可能性があります。

W3Cの分類から私が理解していることから、は<table>データを「のみ」表示することを目的としています。

これに基づい<div>て、背景などを使用してを作成し、データをフロートさせたテーブルを使用してposition: absolute;、background: transparent;...

Chrome、Internet Explorer（6以降）、Mozilla Firefox（2以降）で動作します。

マージンはコンテナ要素、等の間のスペーサーを作成するために使用される（またはとにかく意味する）され<table>、<div>そして<form>、ではない<tr>、<td>、<span>または<input>。コンテナ要素以外に使用すると、将来のブラウザの更新に合わせてWebサイトを調整するのに忙しくなります。

CSS：

selector{
    padding:0 0 10px 0; // Top left bottom right 
}

CSSのpaddingプロパティを使用して、テーブルセル内のパディングを簡単に設定できます。これは、テーブルのcellpadding属性と同じ効果を生み出す有効な方法です。

table,
th,
td {
  border: 1px solid #666;
}

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

<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <title>Set Cellpadding in CSS</title>

</head>

<body>

  <table>
    <thead>
      <tr>
        <th>Row</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Clark</td>
        <td>Kent</td>
        <td>clarkkent@mail.com</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>peterparker@mail.com</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>johnrambo@mail.com</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

同様に、CSSのborder-spacingプロパティを使用して、cellspacing属性のように、隣接するテーブルセルの境界線の間隔を適用できます。ただし、border-spacingを機能させるには、border-collapseプロパティの値を個別に設定する必要があります。これがデフォルトです。

table {
  border-collapse: separate;
  border-spacing: 10px;
  /* Apply cell spacing */
}

table,
th,
td {
  border: 1px solid #666;
}

table th,
table td {
  padding: 5px;
  /* Apply cell padding */
}

<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <title>Set Cellspacing in CSS</title>

</head>

<body>

  <table>
    <thead>
      <tr>
        <th>Row</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Clark</td>
        <td>Kent</td>
        <td>clarkkent@mail.com</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>peterparker@mail.com</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>johnrambo@mail.com</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

これを試して：

table {
    border-collapse: separate;
    border-spacing: 10px;
}
table td, table th {
    padding: 10px;
}

またはこれを試してください：

table {
    border-collapse: collapse;
}
table td, table th {
    padding: 10px;
}

私!importantはボーダー崩壊の後に使用しました

border-collapse: collapse !important;

IE7で動作します。Cellspacing属性をオーバーライドするようです。

<table>
    <tr>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

cell-paddingpaddingCSS で指定できますが、テーブルのcell-spacing設定で設定できborder-spacingます。

table {
    border-spacing: 10px;
}
td {
    padding: 10px;
}

フィドル。

td {
    padding: npx; /* For cellpadding */
    margin: npx; /* For cellspacing */
    border-collapse: collapse; /* For showing borders in a better shape. */
}

場合はmargin仕事しませんでした、設定しようとするdisplayのtrに対してblock、次にマージンが動作します。

テーブルの場合、cellspacingとcellpaddingはHTML 5では廃止されました。

今度はセルスペースの場合は、ボーダースペースを使用する必要があります。そして、セルパディングのためには、border-collapseを使用する必要があります。

また、これをHTML5コードで使用しないでください。これらの値は常にCSS 3ファイルで使用するようにしてください。

table {
    border-spacing: 4px; 
    color: #000; 
    background: #ccc; 
}
td {
    padding-left: 4px;
}

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

以下のためのセルのパディング：

単純なtd/thセルを呼び出すだけpaddingです。

例：

/******Call-Padding**********/

table {
    border-collapse: collapse;
}

td {
  border: 1px solid red;
  padding: 10px;
}

<table>
        <tr>
            <th>Head1 </th>
            <th>Head2 </th>
            <th>Head3 </th>
            <th>Head4 </th>
        </tr>
        <tr>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
        </tr>
        <tr>
            <td>31</td>
            <td>32</td>
            <td>33</td>
            <td>34</td>
        </tr>
        <tr>
            <td>41</td>
            <td>42</td>
            <td>43</td>
            <td>44</td>
        </tr>
    </table>

table {
    border-collapse: collapse;
}

td {
  border: 1px solid red;
  padding: 10px;
}

以下のためのセル間隔

単純に電話する table border-spacing

例：

/********* Cell-Spacing   ********/
table {
    border-spacing: 10px;
    border-collapse: separate;
}

td {
  border: 1px solid red;
}

<table>
        <tr>
            <th>Head1</th>
            <th>Head2</th>
            <th>Head3</th>
            <th>Head4</th>
        </tr>
        <tr>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
        </tr>
        <tr>
            <td>31</td>
            <td>32</td>
            <td>33</td>
            <td>34</td>
        </tr>
        <tr>
            <td>41</td>
            <td>42</td>
            <td>43</td>
            <td>44</td>
        </tr>
    </table>

/********* Cell-Spacing   ********/
table {
    border-spacing: 10px;
    border-collapse: separate;
}

td {
  border: 1px solid red;
}

CSSソースリンクの詳細なテーブルリンクここに、CSSの詳細なテーブルスタイルがあります。

あなたは、単に使用して、あなたのCSSでこのような何かを行うことができますborder-spacingし、padding：

table {
  border-collapse: collapse;
}

td, th {
  padding: 1em;
  border: 1px solid blue;
}

<table>
  <tr>
    <th>head_1</th>
    <th>head_2</th>
    <th>head_3</th>
    <th>head_4</th>
  </tr>
  <tr>
    <td>txt_1</td>
    <td>txt_2</td>
    <td>txt_3</td>
    <td>txt_4</td>
  </tr>
</table>

スタイルをテーブル自体に直接追加してみませんか？これはtableCSS で使用するのではなく、ページに複数のテーブルがある場合の悪いアプローチです。

<table style="border-collapse: separate;border-spacing: 2px;">
    <tr>
        <td style="padding: 4px 4px;">Some Text</td>
    </tr>
</table>

これと特定のテーブルのすべてのセルが影響を受けることをお勧めします。

table.tbl_classname td, th {
    padding: 5px 5px 5px 4px   ;
 }

以下のコードをチェックして、を作成しindex.htmlて実行するだけです。

<!DOCTYPE html>
<html>
   <head>
      <style>
         table{
         border-spacing:10px;
         }
         td{
         padding:10px;
         }
      </style>
   </head>
   <body>
      <table cellspacing="0" cellpadding="0">
         <th>Col 1</th>
         <th>Col 2</th>
         <th>Col 3</th>
         <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
         </tr>
      </table>
   </body>
</html>

出力：