web-dev-qa-db-ja.com

div間のスペース-表セルの表示

ここには2つのdivがあります：

<div style="display:table-cell" id="div1">
    content
</div>

<div style="display:table-cell" id="div2">
    content
</div>

これら2つのdiv（display:table-cellがある）の間にスペースを作る方法はありますか？

htmlcsscss-tables
92
System-x32z

border-spacing プロパティを使用できます：

HTML：

<div class="table">
    <div class="row">
        <div class="cell">Cell 1</div>
        <div class="cell">Cell 2</div>
    </div>
</div>

CSS：

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

.row { display:table-row; }

.cell {
  display:table-cell;
  padding:5px;
  background-color: gold;
}

JSBinデモ

他のオプションはありますか？

まあ、そうでもない。

なぜ？

  • marginプロパティ 該当なし to display: table-cell要素。
  • paddingプロパティは、セルの端の間にスペースを作成しません。
  • floatプロパティは、親要素と同じ高さにできるtable-cell要素の予期される動作を破壊します。
183
Hashem Qolami

可能であれば、透明な境界線を使用します。

JSFiddleデモ

https://jsfiddle.net/74q3na62/

HTML

<div class="table">
    <div class="row">
        <div class="cell">Cell 1</div>
        <div class="cell">Cell 2</div>
        <div class="cell">Cell 3</div>
    </div>
</div>

CSS

.table {
  display: table;
  border: 1px solid black;
}

.row { display:table-row; }

.cell {
  display: table-cell;
  background-clip: padding-box;
  background-color: gold;
  border-right: 10px solid transparent;
}

.cell:last-child {
  border-right: 0 none;
}

説明

border-spacingプロパティを使用できますが、テーブルセル間だけでなく、テーブルセルとテーブルコンテナ間にもスペースを生成します。

テーブルのセルに表示される境界線が必要ない場合は、transparent bordersを使用してセルのマージンを生成する必要があります。透明な境界線では、テーブルセルの背景色が境界線に表示されるため、background-clip: padding-box;を設定する必要があります。

IE9では、透明な境界線と背景クリップがサポートされています（その他のすべての最新ブラウザー）。 IE8との互換性が必要な場合、または実際の透明なスペースが必要ない場合は、白い境界線の色を設定し、background-clipを省略できます。

17
Max
<div style="display:table;width:100%"  >
<div style="display:table-cell;width:49%" id="div1">
content
</div>

<!-- space between divs - display table-cell -->
<div style="display:table-cell;width:1%" id="separated"></div>
<!-- //space between divs - display table-cell -->

<div style="display:table-cell;width:50%" id="div2">
content
</div>
</div>
0
jalalBK

さて、上記は機能しますが、ここでは少し少ないマークアップを必要とし、より柔軟な私のソリューションです。

.cells {
  display: inline-block;
  float: left;
  padding: 1px;
}
.cells>.content {
  background: #EEE;
  display: table-cell;
  float: left;
  padding: 3px;
  vertical-align: middle;
}
<div id="div1" class="cells"><div class="content">My Cell 1</div></div>
<div id="div2" class="cells"><div class="content">My Cell 2</div></div>
0
Gareth Clarke