CSSテーブルレイアウト：テーブル行がマージンを受け入れないのはなぜですか？

99

.container {
  width: 850px;
  padding: 0;
  display: table;
  margin-left: auto;
  margin-right: auto;
}
.row {
  display: table-row;
  margin-bottom: 30px;
  /* HERE */
}
.home_1 {
  width: 64px;
  height: 64px;
  padding-right: 20px;
  margin-right: 10px;
  display: table-cell;
}
.home_2 {
  width: 350px;
  height: 64px;
  padding: 0px;
  vertical-align: middle;
  font-size: 150%;
  display: table-cell;
}
.home_3 {
  width: 64px;
  height: 64px;
  padding-right: 20px;
  margin-right: 10px;
  display: table-cell;
}
.home_4 {
  width: 350px;
  height: 64px;
  padding: 0px;
  vertical-align: middle;
  font-size: 150%;
  display: table-cell;
}

<div class="container">
  <div class="row">
    <div class="home_1"></div>
    <div class="home_2"></div>
    <div class="home_3"></div>
    <div class="home_4"></div>
  </div>

  <div class="row">
    <div class="home_1"></div>
    <div class="home_2"></div>
  </div>
</div>

スニペットを展開

私の質問はHERE、CSSでマークされた行に関連しています。行が近すぎることがわかったので、下マージンを追加して行を分離しようとしました。残念ながら動作しません。行を区切るには、テーブルセルにマージンを追加する必要があります。

この動作の背後にある理由は何ですか？

また、私がしているように、この戦略を使用してレイアウトを実行しても大丈夫ですか？

[icon] - text      [icon] - text
[icon] - text      [icon] - text

またはより良い戦略はありますか？

html css

— ステファノボリーニ
ソース

行の間にスペースが必要な場合は、home_4にpadding-bottomを追加します。

— Satbir Kira 2016

83

CSS 2.1標準のセクション17.5.3を参照してください。を使用する場合display:table-row、DIVの高さは、DIV table-cell内の要素の高さによってのみ決定されます。したがって、これらの要素のマージン、パディング、高さは影響しません。

http://www.w3.org/TR/CSS2/tables.html

— リチャードタレント
ソース

30

これは（実際のテーブルを使用して）回避策としてどうですか？

table {
    border-collapse: collapse;
}

tr.row {
    border-bottom: solid white 30px; /* change "white" to your background color */
}

境界線の色を明示的に設定する必要があるため（動的な方法がない限り）、動的ではありませんが、これは私自身のプロジェクトで実験しています。

に関するコメントを含めるように編集しますtransparent。

tr.row {
    border-bottom: 30px solid transparent;
}

— マフィンザマン
ソース

14

色は「白」ではなく「透明」にしてみてください。

— Lendrick 2013

テーブルセルに透明な境界線を追加するだけで、テーブルが折りたたまれていなくても、完全に機能しますありがとう！

— Igor Laszlo 2014年

18

私が見た最も近いものはborder-spacing: 0 30px;、コンテナーdiv に設定することです。しかし、これではテーブルの上端にスペースができるだけで、マージンボトムが必要だったので、目的に反します。

— ジュリアン・H・ラム
ソース

1

また、あなたは試すことができますline-height

— Raheel Hasan

1

で上下のスペースを削除できますmargin: -30px 0。

— Sanghyun Lee 2014

これらすべての回避策のうち、border-spacingは最もセマンティックなオプションのようです。ありがとう！

— Pikamander2

6

下余白を.row div、つまり「セル」に設定してみましたか？実際のHTMLテーブルを操作する場合、行にもマージンを設定することはできません。セルにのみ設定できます。

— ナイビスト
ソース

残念ながら、それはうまくいきませんでした。「パディング」のみがでdivに影響を与えることができますdisplay: table。しかし、それはマージンと同じではありません...

— ジュリアンH.ラム

3

これにはかなり単純な修正があり、border-spacingおよびborder-collapseCSS属性はで機能しdisplay: tableます。

以下を使用して、セルのパディング/マージンを取得できます。

.container {
  width: 850px;
  padding: 0;
  display: table;
  margin-left: auto;
  margin-right: auto;
  border-collapse: separate;
  border-spacing: 15px;
}

.row {
  display: table-row;
}

.home_1 {
  width: 64px;
  height: 64px;
  padding-right: 20px;
  margin-right: 10px;
  display: table-cell;
}

.home_2 {
  width: 350px;
  height: 64px;
  padding: 0px;
  vertical-align: middle;
  font-size: 150%;
  display: table-cell;
}

.home_3 {
  width: 64px;
  height: 64px;
  padding-right: 20px;
  margin-right: 10px;
  display: table-cell;
}

.home_4 {
  width: 350px;
  height: 64px;
  padding: 0px;
  vertical-align: middle;
  font-size: 150%;
  display: table-cell;
}

<div class="container">
  <div class="row">
    <div class="home_1">Foo</div>
    <div class="home_2">Foo</div>
    <div class="home_3">Foo</div>
    <div class="home_4">Foo</div>
  </div>

  <div class="row">
    <div class="home_1">Foo</div>
    <div class="home_2">Foo</div>
  </div>
</div>

スニペットを展開

あなたが持っている必要があることに注意してください

border-collapse: separate;

そうしないと機能しません。

— クリス・ボイド
ソース

これは魅力のように機能しますが、唯一の問題は、border-separateを適用するとすぐに行から境界線が削除され、行の境界線がborder-bottom：1px solid＃000として使用されていたことです。

— Abbas

0

フィドル

 .row-seperator{
   border-top: solid transparent 50px;
 }

<table>
   <tr><td>Section 1</td></tr>
   <tr><td>row1 1</td></tr>
   <tr><td>row1 2</td></tr>
   <tr>
      <td class="row-seperator">Section 2</td>
   </tr>
   <tr><td>row2 1</td></tr>
   <tr><td>row2 2</td></tr>
</table>


#Outline
Section 1
row1 1
row1 2


Section 2
row2 1
row2 2

これは別の解決策になる可能性があります

— メフメットエレンイエナー
ソース

0

2つの要素の間にスペーサースパンを追加して、非表示にします。

<img src="#" />
<span class="spacer">---</span>
<span>Text TEXT</span>

.spacer {
    visibility: hidden
}

— ファンキーなnd
ソース

0

機能-テーブルに間隔を追加

#options table {
  border-spacing: 8px;
}

— ジェイソン
ソース

-2

動作するdivの間にbrタグを追加しました。display：tableを持つ親のdisplay：table-rowである2つのdivの間にbrタグを追加します

— TeT Psy
ソース