109

私のHTMLドキュメントには、2つの列と複数の行を持つテーブルがあります。cssを使用して1列目と2列目の間のスペースを増やすにはどうすればよいですか？「margin-right：10px;」を適用してみました 左側の各セルに適用されますが、効果はありません。

4

16 に答える 16

158

警告の言葉:特定の (視覚的な) 問題を解決するかもしれませんが、表のセル間padding-rightにスペースを追加するのは正しい方法ではありません。セルに対して行うことは、他のほとんどの要素に対して行うことと似ています。つまり、セル内にスペースを追加します。セルに境界線や背景色、またはゲームを提供する何かがない場合、これはセル間にスペースを設定する効果を模倣できますが、それ以外の場合はそうではありません.padding-right

誰かが指摘したように、表のセルではマージンの指定は無視されます。

CSS 2.1 仕様 – テーブル – テーブル コンテンツのビジュアル レイアウト

内部テーブル要素は、コンテンツと境界線を含む長方形のボックスを生成します。セルにもパディングがあります。内部テーブル要素には余白がありません。

では、「正しい」方法は何ですか？cellspacingテーブルの属性を置き換えようとしている場合は、 border-spacing(border-collapse無効にすると) 置き換えられます。ただし、セルごとの「マージン」が必要な場合、CSS を使用してそれを正しく実現する方法がわかりません。私が考えることができる唯一のハックはpadding、上記のように使用し、セルのスタイリング (背景色、境界線など) を避け、代わりにセル内でコンテナー DIV を使用してそのようなスタイリングを実装することです。

私は CSS の専門家ではないので、上記の内容は間違っている可能性があります (知っておくと便利です! 私もテーブル セル マージンの CSS ソリューションが欲しいです)。

乾杯！

于 2010-06-07T02:35:24.330 に答える
104

これを最初に適用します<td>：

padding-right:10px;

HTMLの例：

<table>
   <tr>
      <td style="padding-right:10px">data</td>
      <td>more data</td>
   </tr>
</table>
于 2009-04-04T03:32:25.673 に答える
31

パディングを使用できない場合 (たとえば、td に境界線がある場合)、これを試してください

table { 
           border-collapse: separate;
           border-spacing: 2px;
}
于 2013-02-19T14:11:13.553 に答える
15

残念ながら個々のセルではマージンは機能しませんが、間にスペースを入れたい2つのセルの間に余分な列を追加できます...別のオプションは、背景と同じ色の境界線を使用することです...

于 2011-04-07T13:33:38.387 に答える
15

これはかなり遅れていることを認識していますが、記録として、CSS セレクターを使用してこれを行うこともできます (インライン スタイルの必要性を排除します)。この CSS は、すべての行の最初の列にパディングを適用します。

table > tr > td:first-child { padding-right:10px }

そして、これはあなたの HTML であり、CSS はありません!:

<table><tr><td>data</td><td>more data</td></tr></table>

これにより、特に CSS で多くの特定の書式設定を行う必要がある場合に、より洗練されたマークアップが可能になります。

于 2009-07-23T14:47:27.700 に答える
11

あなたは簡単にそれを行うことができます：

<html>
<table>
    <tr>
        <td>one</td>
        <td width="10px"></td>
        <td>two</td>
    </tr>
</table>
</html>

CSS は必要ありません :) この 10px がスペースです。

于 2013-04-05T21:21:43.680 に答える
9

試してみてくださいpadding-right。marginセルの間に'sを入れることは許可されていません。

<table>
   <tr>
      <td style="padding-right: 10px;">one</td>
      <td>two</td>
   </tr>
</table>
于 2009-04-04T03:32:15.800 に答える
4

ボーダーコラプスの使用: 分離; テーブルの側面ではなく、テーブルセル間のマージンのみが必要なため、うまくいきませんでした。

次の解決策を思いつきました：

-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>
于 2014-10-28T22:58:57.363 に答える
3

この方法でセル内の個々の列を選択することはできません。私の意見ではstyle='padding-left:10px'、2番目の列にを追加し、内部のdivまたは要素にスタイルを適用するのが最善のオプションです。このようにして、より広い空間の錯覚を実現できます。

于 2009-04-04T03:32:58.230 に答える
2

解決

この問題を解決する最善の方法は、試行錯誤と私の前に書かれたものを読むことであることがわかりました。

http://jsfiddle.net/MG4hD/


ご覧のとおり、かなりトリッキーな作業が行われています...しかし、見栄えを良くするための主なキッカーは次のとおりです。

親要素 (UL): 境界崩壊: 分離; ボーダー間隔: .25em; 左マージン: -.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; }
于 2013-07-03T03:32:19.137 に答える
1

余白の代わりに境界線を設定するというCianの解決策に従って、背景の色と一致する必要がないように、境界線の色を透明に設定できることを発見しました。FF17、IE9、Chromev23で動作します。実際の境界線も必要ないという条件で、まともな解決策のようです。

于 2013-01-01T02:43:25.083 に答える
1

両方を使用できます。

padding-right:10px;

padding-right:10%;

ただし、%と一緒に使用することをお勧めします。

于 2016-05-19T11:16:00.257 に答える
1 

<!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>

パディングを使用するのは正しい方法ではありません。見た目が変わるかもしれませんが、それはあなたが望んでいたものではありません。これで問題が解決する場合があります。

于 2015-12-17T07:00:28.973 に答える
1

パディングが機能しない場合は、別の回避策として、列を追加し、 を使用して幅でマージンを設定し<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; }
于 2016-06-17T02:52:35.517 に答える