web-dev-qa-db-ja.com

CSSセルマージン

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

htmlcsscellmargincss-tables
84
Tom

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

padding-right:10px;

HTMLの例：

<table>
   <tr>
      <td style="padding-right:10px">data</td>
      <td>more data</td>
   </tr>
</table>
81
roman m

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

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

CSS 2.1仕様–テーブル–テーブルの内容の視覚的レイアウト

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

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

私はCSSの専門家ではないので、上記で間違っている可能性があります（知っておくといいでしょう！私もテーブルセルマージンCSSソリューションが欲しいです）。

乾杯！

146
ravi

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

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

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

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

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

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

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

14
Rob

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

14
Cian

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

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

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

9
MrTrebor

padding-rightを試してください。セル間にmarginを挿入することはできません。

<table>
   <tr>
      <td style="padding-right: 10px;">one</td>
      <td>two</td>
   </tr>
</table>
7
mpen

border-collapse：separate;を使用してもうまくいきませんでした。テーブルの両側ではなく、テーブルセルの間にマージンだけが必要だからです。

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

-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>
4
Robin

このソリューションは、スタイリングに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>
4
LGSon

その方法でセル内の個々の列を選択することはできません。私の意見では、2番目の列にstyle='padding-left:10px'を追加し、内部divまたは要素にスタイルを適用するのが最良の選択肢です。これにより、より大きな空間の錯覚を実現できます。

2
jerebear

解決

この問題を解決する最良の方法は、試行錯誤と私の前に書かれた内容を読むことです。

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

テーブルの幅を制御できる場合は、すべてのテーブルセルに左にパディングを挿入し、テーブル全体に負の左マージンを挿入します。

table {
    margin-left: -20px;
    width: 720px;
}

table td {
    padding-left: 20px;
}

テーブルの幅にはパディング/マージン幅を含める必要があることに注意してください。上記を例として使用すると、テーブルの視覚的な幅は700ピクセルになります。

テーブルのセルに境界線を使用している場合、これは最適なソリューションではありません。

2
Dallas Clark

両方を使用できます：

padding-right:10px;

padding-right:10%;

ただし、％と一緒に使用する方が適切です。

1
Muhammad Awais

余白の代わりに境界線を設定するCianのソリューションに続いて、境界線の色を透明に設定して、背景と色を合わせる必要がないようにすることができることを発見しました。 FF17、IE9、Chrome v23で動作します。実際の境界線も必要ない場合は、適切なソリューションのようです。

1
Vitaly Chernobyl
<!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>

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

1
Sengottaian Karthik

パディングが機能しない場合、別の回避策は、列を追加し、<colgroup>を使用して幅でマージンを設定することです。上記のパディングソリューションはどれも、セルの境界自体にマージンを与えようとしていたので、うまくいきませんでした。これが最終的に問題を解決したものです。

<table>
  <colgroup>
    <col>
    <col width="20px">
    <col>
  </colgroup>
  <tr>
     <td>data</td>
     <td></td>
     <td>more data</td>
   </tr>
</table>

2番目と3番目の列が1つの列に見えるように、：nth-​​childを使用してテーブルセルの境界線のスタイルを設定します。

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