回答:
これをあなたの最初に適用してください<td>：
padding-right:10px;HTMLの例：
<table>
<tr>
<td style="padding-right:10px">data</td>
<td>more data</td>
</tr>
</table>border-collapse: separate（separate上記のスペルにタイプミスがあった）
border-spacing: 5px;
border-spacing行間にスペースも追加します。残念ながら、垂直方向と水平方向の間隔に個別のプロパティはありません。
border-spacing2つの引数を取ります-1つは水平、もう1つは垂直です。
警告：padding-right特定の（視覚的な）問題は解決するかもしれませんが、テーブルセルの間にスペースを追加する正しい方法ではありません。どのようなpadding-rightセルのために行うことは、それは他のほとんどの要素のために何をするかのようになります。それはスペースが追加されます内の細胞。セルに境界線や背景色など、ゲームに影響を与える何かがない場合、これはセル間のスペースを設定する効果を模倣できますが、それ以外の場合は模倣できません。
誰かが指摘したように、テーブルセルのマージン指定は無視されます。
CSS 2.1仕様–テーブル–テーブルコンテンツの視覚的なレイアウト
内部テーブル要素は、コンテンツと境界線を持つ長方形のボックスを生成します。セルにもパディングがあります。内部テーブル要素にはマージンがありません。
では、「正しい」方法は何でしょうか。cellspacingテーブルの属性を置き換えようとしている場合は、border-spacing（border-collapse無効になっている）の代わりになります。ただし、セルごとの "マージン"が必要な場合、CSSを使用してそれを正しく実現する方法がわかりません。私が考えることができる唯一のハックはpadding、上記のように使用し、セルのスタイル設定（背景色、境界線など）を避け、代わりにセル内のコンテナーDIVを使用してそのようなスタイル設定を実装することです。
私はCSSのエキスパートではないので、上記の点で間違っている可能性があります（知っておくと便利です！テーブルセルマージンのCSSソリューションも必要です）。
乾杯！
パディングを使用できない場合（たとえば、tdにボーダーがある場合）、これを試してください
table {
border-collapse: separate;
border-spacing: 2px;
}これはかなり遅れていることに気づきますが、記録のために、CSSセレクターを使用してこれを行うこともできます（インラインスタイルの必要性を排除します）。このCSSは、すべての行の最初の列にパディングを適用します。
table > tr > td:first-child { padding-right:10px }そして、これはあなたのHTMLであり、CSSではありません！：
<table><tr><td>data</td><td>more data</td></tr></table>これにより、特にCSSで多数の特定のフォーマットを行う必要がある場合に、よりエレガントなマークアップが可能になります。
マージンは残念ながら個々のセルでは機能しませんが、間にスペースを入れたい2つのセルの間に余分な列を追加できます...別のオプションは、背景と同じ色の境界線を使用することです...
あなたは単にそれを行うことができます：
<html>
<table>
<tr>
<td>one</td>
<td width="10px"></td>
<td>two</td>
</tr>
</table>
</html>CSSは必要ありません:)この10pxはあなたのスペースです。
border-collapseの使用：分離; テーブルの横ではなく、テーブルセルの間にマージンが必要なだけだったので、私にはうまくいきませんでした。
私は次の解決策を思いつきました：
- CSS
.tableDiv{
display: table;
}
.cellSeperator {
display: table-cell;
width: 20px;
}
.cell1 {
display: table-cell;
width: 200px;
}
.cell2 {
display: table-cell;
width: 50px;
}- HTML
<div class="tableDiv">
<div class="cell1"></div>
<div class="cellSeperator"></div>
<div class="cell2"></div>
</div>このソリューションtdは、両方を必要borderとpaddingするとスタイルの両方で機能します。
（Chrome 32、IE 11、Firefox 25でテスト済み）
CSS:
table {border-collapse: separate; border-spacing:0; } /* separate needed */
td { display: inline-block; width: 33% } /* Firefox need inline-block + width */
td { position: relative } /* needed to make td move */
td { left: 10px; } /* push all 10px */
td:first-child { left: 0px; } /* move back first 10px */
td:nth-child(3) { left: 20px; } /* push 3:rd another extra 10px */
/* to support older browsers we need a class on the td's we want to push
td.col1 { left: 0px; }
td.col2 { left: 10px; }
td.col3 { left: 20px; }
*/
HTML:
<table>
<tr>
<td class='col1'>Player</td>
<td class='col2'>Result</td>
<td class='col3'>Average</td>
</tr>
</table>2016年更新
Firefoxはinline-block、セットなしとセットなしでサポートするようになりましたwidth
table {border-collapse: separate; border-spacing:0; }
td { position: relative; padding: 5px; }
td { left: 10px; }
td:first-child { left: 0px; }
td:nth-child(3) { left: 20px; }
td { border: 1px solid gray; }
/* CSS table */
.table {display: table; }
.tr { display: table-row; }
.td { display: table-cell; }
.table { border-collapse: separate; border-spacing:0; }
.td { position: relative; padding: 5px; }
.td { left: 10px; }
.td:first-child { left: 0px; }
.td:nth-child(3) { left: 20px; }
.td { border: 1px solid gray; }<table>
<tr>
<td>Player</td>
<td>Result</td>
<td>Average</td>
</tr>
</table>
<div class="table">
<div class="tr">
<div class="td">Player</div>
<div class="td">Result</div>
<div class="td">Average</div>
</div>
</div>この問題を解決する最良の方法は、試行錯誤と私の前に書かれたものを読むことの組み合わせであることがわかりました。
ご覧のとおり、かなりトリッキーなことが起こっています...しかし、これを美しくするための主なキッカーは次のとおりです。
親要素（UL）：border-collapse：別; ボーダー間隔：.25em; margin-left：-.25em;
子要素（LI）：表示：テーブルセル; 垂直方向に揃える：中央;
HTML
<ul>
<li><span class="large">3</span>yr</li>
<li>in<br>stall</li>
<li><span class="large">9</span>x<span class="large">5</span></li>
<li>on<br>site</li>
<li>globe</li>
<li>back<br>to hp</li>
</ul>CSS
ul { border: none !important; border-collapse: separate; border-spacing: .25em; margin: 0 0 0 -.25em; }
li { background: #767676 !important; display: table-cell; vertical-align: middle; position: relative; border-radius: 5px 0; text-align: center; color: white; padding: 0 !important; font-size: .65em; width: 4em; height: 3em; padding: .25em !important; line-height: .9; text-transform: uppercase; }マージンの代わりに境界線を設定するCianの解決策に従って、背景色と一致する必要がないように境界線の色を透明に設定できることを発見しました。FF17、IE9、Chrome v23で動作します。実際の境界線も必要ない場合は、適切なソリューションのようです。
<!DOCTYPE html>
<html>
<head>
<style>
table{
border-spacing: 16px 4px;
}
td {
border: 1px solid black;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>パディングを使用するのは正しい方法ではありません。見た目が変わる可能性がありますが、希望どおりではありません。これで問題が解決する場合があります。
あなたはそれらの両方を使うことができます：
padding-right:10px;
padding-right:10%;ただし、％で使用することをお勧めします。
%
パディングが機能しない場合、別の回避策は、列を追加し、を使用して幅を介してマージンを設定すること<colgroup>です。セルの境界自体にマージンを与えようとしたので、上記のパディングソリューションはどれも機能しませんでした。これが最終的に問題を解決したものです。
<table>
<colgroup>
<col>
<col width="20px">
<col>
</colgroup>
<tr>
<td>data</td>
<td></td>
<td>more data</td>
</tr>
</table>：nth-childを使用してテーブルセルの境界線のスタイルを設定し、2番目と3番目の列が1つの列に見えるようにします。
table tr td:nth-child(2) { border: 1px solid black; border-right:0; }
table tr td:nth-child(3) { border: 1px solid black; border-left:0; }