HTML テーブルでは、cellpaddingとは次のcellspacingように設定できます。
<table cellspacing="1" cellpadding="1">
CSSを使用して同じことをどのように達成できますか?
2587072 次
30 に答える
3772
基本
CSS で "cellpadding" を制御するには、単純paddingに表のセルで使用できます。たとえば、「cellpadding」の 10px の場合:
td {
padding: 10px;
}
border-spacing「セル間隔」については、 CSS プロパティをテーブルに適用できます。たとえば、「cellspacing」の 10px の場合:
table {
border-spacing: 10px;
border-collapse: separate;
}
このプロパティは、従来の「セル間隔」ではできなかった、水平方向と垂直方向の間隔を分離することもできます。
IE ≤ 7 の問題
これは、Internet Explorer から 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 プロパティと、どのブラウザーに適用できるかについての優れた概要については、この素晴らしい Quirksmode ページを参照してください。
于 2010-07-09T02:34:02.337 に答える
1003
デフォルト
ブラウザのデフォルトの動作は次と同等です。
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-collapseseparate
ここでは、これを実現する古い HTML の方法を見つけることができます。
于 2012-06-12T10:24:17.730 に答える
362
table
{
border-collapse: collapse; /* 'cellspacing' equivalent */
}
table td, table th
{
padding: 0; /* 'cellpadding' equivalent */
}
于 2009-08-24T15:17:36.447 に答える
121
テーブルセルにマージンを設定しても、私が知る限り、実際には何の効果もありません。に相当する真のCSScellspacingはborder-spacing-ですが、InternetExplorerでは機能しません。
前述のように、セル間隔を確実に0に設定するために使用できますが、他の値の場合、クロスブラウザーの唯一の方法は属性border-collapse: collapseを使用し続けることだと思います。cellspacing
于 2008-12-04T09:18:10.377 に答える
106
このハックは、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 では予想よりも多くの引数を渡すことができ、それらすべてが評価されるため、両方のステートメントが実行されます。
于 2011-12-05T04:30:39.990 に答える
71
ゼロ以外のセル間隔値が必要な場合は、次のCSSが機能しましたが、Firefoxでしかテストできません。
互換性の詳細については、他の場所に投稿されているQuirksmodeリンクを参照してください。古いバージョンのInternetExplorerでは動作しない可能性があります。
table {
border-collapse: separate;
border-spacing: 2px;
}
于 2011-08-20T03:32:59.350 に答える
54
この問題の簡単な解決策は次のとおりです。
table
{
border: 1px solid #000000;
border-collapse: collapse;
border-spacing: 0px;
}
table td
{
padding: 8px 8px;
}
于 2011-12-08T16:04:01.137 に答える
50
また、必要に応じて、のスタイルシートcellspacing="0"を追加することを忘れないborder-collapse: collapseでくださいtable。
于 2008-12-04T09:06:50.307 に答える
45
セルの内容を 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 でしかテストしていません。仕事で使用できるのは Internet Explorer だけだからです。
于 2012-06-19T14:57:56.423 に答える
24
border-collapse: collapseテーブルとpaddingまたはthに使用するだけtdです。
于 2014-01-03T03:12:02.537 に答える
22
このスタイルは、表のセルパディング、セル間隔、ボーダーを完全にリセットするためのものです。
私の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 */
}
于 2014-04-28T15:08:06.587 に答える
20
TBH。CSS のすべてのファニーについては、cellpadding="0" cellspacing="0"非推奨ではないため、そのまま使用することもできます...
のマージンを示唆している他<td>の人は、明らかにこれを試していません。
于 2010-02-26T11:25:10.620 に答える
18
table th,td {
padding: 8px 2px;
}
table {
border-collapse: separate;
border-spacing: 2px;
}
于 2014-01-08T18:16:33.287 に答える
17
テーブル データで CSS パディング ルールを使用するだけです。
td {
padding: 20px;
}
境界線の間隔:
table {
border-spacing: 1px;
border-collapse: collapse;
}
ただし、ボックス モデルの差分実装により、Internet Explorer などの古いバージョンのブラウザーで問題が発生する可能性があります。
于 2014-03-15T22:33:41.310 に答える
15
W3C分類から私が理解していることから、<table>sはデータを「のみ」表示するためのものであるということです。
これに基づいて、背景などを使用してを作成し、データを含むテーブルを作成する方がはるかに簡単であることがわかりまし<div>た...position: absolute;background: transparent;
Chrome、Internet Explorer（6以降）およびMozilla Firefox（2以降）で動作します。
マージンは、、、、またはではなく<table>、、、<div>などのコンテナ要素間にスペーサーを作成するために使用されます（またはとにかく意味されます）。コンテナ要素以外の目的で使用すると、将来のブラウザの更新に備えてWebサイトを調整するのに忙しくなります。<form><tr><td><span><input>
于 2012-07-02T13:43:15.890 に答える
13
CSS:
selector{
padding:0 0 10px 0; // Top left bottom right
}
于 2014-02-27T09:03:37.853 に答える
12
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-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>于 2017-08-02T09:52:32.293 に答える
11
これを試して：
table {
border-collapse: separate;
border-spacing: 10px;
}
table td, table th {
padding: 10px;
}
またはこれを試してください：
table {
border-collapse: collapse;
}
table td, table th {
padding: 10px;
}
于 2013-06-14T05:51:42.133 に答える
9
私!importantは国境の後に使用しました-のように崩壊します
border-collapse: collapse !important;
そしてそれはIE7で私のために働きます。これは、cellspacing属性をオーバーライドしているようです。
于 2013-02-14T15:41:57.637 に答える
5
HTML テーブルでは、cellpaddingとは次のcellspacingように設定できます。
セルパディングの場合:
td/thシンプルなcellを呼び出すだけ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 によるその他のテーブル スタイルを取得します。
于 2016-11-02T06:58:13.523 に答える
5
表の場合、cellspacing と cellpadding は HTML 5 で廃止されました。
セル間隔には、ボーダー間隔を使用する必要があります。また、セルのパディングには、border-collapse を使用する必要があります。
HTML5 コードでこれを使用しないようにしてください。CSS 3 ファイルでは常にこれらの値を使用するようにしてください。
于 2016-06-03T12:03:26.320 に答える
0
スタイルをテーブル自体に直接追加するのはどうですか? これは、ページに複数のテーブルがある場合に悪いtable方法である CSSで使用する代わりです。
<table style="border-collapse: separate;border-spacing: 2px;">
<tr>
<td style="padding: 4px 4px;">Some Text</td>
</tr>
</table>
于 2015-02-26T05:30:28.393 に答える
0
これをお勧めします。特定のテーブルのすべてのセルが影響を受けます。
table.tbl_classname td, th {
padding: 5px 5px 5px 4px;
}
于 2019-11-17T05:09:20.190 に答える