web-dev-qa-db-ja.com

セルパッドとセルスペースをCSSに設定しますか？

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

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

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

htmlcsshtml-tablealignment
3111
kokos

基本

CSSで "cellpadding"を制御するために、テーブルセルにpaddingを使うことができます。例えば。 "cellpadding"の10ピクセルの場合：

td { 
    padding: 10px;
}

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

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

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

IE <= 7の問題

これは、Internet Explorer 7からInternet Explorer 7までのほとんどすべてのブラウザで動作します。私は「ほとんど」と言っています。なぜなら、これらのブラウザは隣接するテーブルセルの境界をマージするborder-collapseプロパティをまだサポートしているからです。セルスペース（つまりcellspacing="0"）を排除しようとしているのであれば、border-collapse:collapseも同じ効果を持つはずです。テーブルセル間にスペースを入れないでください。ただし、このサポートはバグがあります。テーブル要素の既存のcellspacing HTML属性をオーバーライドしないためです。

要するに、Internet Explorer 5-7以外のブラウザでは、border-spacingがあなたを扱います。 Internet Explorerの場合、状況がちょうどよい場合（セルスペースを0にしたいのにテーブルに定義していない場合）、border-collapse:collapseを使用できます。

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

注：テーブルに適用できるCSSプロパティとそのブラウザに適したCSSプロパティの概要については、 素晴らしいQuirksmodeページ を参照してください。

3411
Eric Nguyen

Default

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

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

Enter image description here

セルパディング

セルの内容とセルの壁との間の間隔を設定します

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

Enter image description here

セルスペース

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

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

Enter image description here

両方

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

Enter image description here

両方（特別）

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

Enter image description here

注： border-spacingセットがある場合は、テーブルのborder-collapseプロパティがseparateであることを示します。

自分で試してみてください。

ここ これを達成するための古いHTMLの方法を見つけることができます。

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

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

表のセルに余白を設定しても、私の知る限り、実際には効果がありません。 cellspacingと同等の真のCSSはborder-spacingですが、Internet Explorerでは機能しません。

前述のようにborder-collapse: collapseを使用してセル間隔を確実に0に設定できますが、それ以外の値を使用するには、cellspacing属性を使用し続けることがブラウザ間での唯一の方法であると思います。

111
Will Prescott

このハックは、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では予想よりも多くの引数を渡すことができ、それらすべてが評価されるので、両方のステートメントが実行されます。

94
Vitalii Fedorenko

0以外のセルスペース値を希望する方には、次のCSSが役に立ちましたが、Firefoxでしかテストできません。

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

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

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

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

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

47
mat

セルの内容を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でしかテストしていません。仕事で使用できるのはこれだけです。

41
Robert White

テーブルにborder-collapse: collapseを、paddingまたはthにtdを使用するだけです。

23
Dan

このスタイルは テーブルのフルリセット - セルパディング 、 セルスペース および ボーダー のためのものです。

私は自分の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 */
}
21
Elad Shechter

TBH CSSに興味がある人は、cellpadding="0"cellspacing="0"を使うことをお勧めします。

<td>のマージンを示唆する他の誰もが明らかにこれを試していません。

21
corrector
table th,td {
    padding: 8px 2px;
}
table {
    border-collapse: separate;
    border-spacing: 2px;
}
18
Abhishek Singh

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

td { 
    padding: 20px;
}

そしてボーダーの間隔のために：

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

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

17
suraj rawat

私がW3Cの分類から理解していることから、<table>sはデータのみを表示するためのものであることがわかります。

それに基づいて、私は、背景とそれをすべて含む<div>を作成し、position: absolute;とbackground: transparent;..を使用してその上にデータが浮かんでいるテーブルを作成する方がはるかに簡単であることがわかりました。

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

マージンは、<table>、<div>、<form>、<tr>ではなく、<td>、<span>、および<input>のように、コンテナ要素間にスペーサーを作成するために使用されます（またはとにかく意味があります）。コンテナ要素以外のものにこれを使用すると、将来のブラウザアップデートのためにWebサイトを調整するのに忙しくなります。

16
RolanDecoy

CSS：

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

これを試して：

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

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

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

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>[email protected]</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

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

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>[email protected]</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>

</body>
</html>
9
Rafiqul Islam

私はボーダー崩壊の後に!importantを使った

border-collapse: collapse !important;

そしてそれはIE7で私のために働く。 cellspacing属性より優先されるようです。

9
Håkan Nilsson
<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-paddingはCSSのpaddingで指定できますが、cell-spacingはtableにborder-spacingを設定することで設定できます。

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

Fiddle 。

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

marginが機能しなかった場合は、displayのtrをblockに設定すると、marginが機能します。

6
Majid Sadr

テーブルの場合、セルスペースとセルパディングはHTML 5では廃止されました。

今セル間隔のためにあなたはボーダー間隔を使用しなければならない。セルパッドの場合は、ボーダーコラプスを使用する必要があります。

そして、あなたがあなたのHTML5コードの中でこれを使わないことを確認してください。常にCSS 3ファイルでこれらの値を使うようにしてください。

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

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;
}

セル間隔 の場合

単純なtableborder-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によるより多くの表スタイルを得る 。

3
MD Ashik

border-spacingとpaddingを使って、あなたのCSSの中でこのようなことを単純にすることができます：

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>
3
Alireza

テーブル自体に直接スタイルを追加するのはどうですか。これはあなたのCSSでtableを使う代わりに、あなたのページに複数のテーブルがある場合は _ bad _ /のアプローチです：

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