テーブルの2つの行の間にスペースがありますか？

これはCSS経由で可能ですか？

私はしようとしています

tr.classname {
  border-spacing: 5em;
}

無駄に。多分私は何か間違ったことをしていますか？

td要素にはパディングを使用する必要があります。このようなことがうまくいくはずです。もちろん、下パディングの代わりに上パディングを使用しても同じ結果を得ることができます。

以下のCSSコードでは、大なり記号は、クラスの要素のtd直接の子である要素にのみパディングが適用されることを意味します。これにより、ネストされたテーブルを使用できるようになります。（サンプルコードのセルCとD。）直接の子セレクター（IE 6を考えてください）のブラウザーサポートについてはよくわかりませんが、最新のブラウザーではコードを壊すべきではありません。trspaceUnder

/* Apply padding to td elements that are direct children of the tr elements with class spaceUnder. */

tr.spaceUnder>td {
  padding-bottom: 1em;
}

<table>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
    </tr>
    <tr class="spaceUnder">
      <td>C</td>
      <td>D</td>
    </tr>
    <tr>
      <td>E</td>
      <td>F</td>
    </tr>
  </tbody>
</table>

これは、次のように表示されるはずです。

+---+---+
| A | B |
+---+---+
| C | D |
|   |   |
+---+---+
| E | F |
+---+---+

親テーブルで設定してみてください

border-collapse:separate; 
border-spacing:5em;

ボーダー宣言に加えて、これが目的の効果を達成するかどうかを確認してください。ただし、IEは「境界線の分離」モデルをサポートしていないことに注意してください。

IDアルバムと任意のデータのテーブルがあります... trsとtdsを省略しました

<table id="albums" cellspacing="0">       
</table>

CSSでは：

table#albums 
{
    border-collapse:separate;
    border-spacing:0 5px;
}

テーブルの後ろに背景画像があるので、白いパディングでそれを偽造することはできません。コンテンツの各行の間に空の行を入れることを選択しました。

<tr class="spacer"><td></td></tr>

次に、cssを使用して、スペーサー行に特定の高さと透明な背景を与えます。

Mozilla Developer Networkから：

border-spacing CSSプロパティは、隣接するセルの境界線間の距離を指定します（分離された境界線モデルの場合のみ）。これはプレゼンテーション用HTMLのcellspacing属性に相当しますが、オプションの2番目の値を使用して、異なる水平および垂直の間隔を設定できます。

その最後の部分はしばしば監督されます。例：

.your-table {
    border-collapse: separate; /* allow spacing between cell borders */
    border-spacing: 0 5px; /* NOTE: syntax is <horizontal value> <vertical value> */

更新

OPが特定の個別の行の間隔を広げる必要があることを理解しました。私はセットアップを追加しましたtbodyセマンティクスを損なうことなくそれを実現要素を。ただし、すべてのブラウザでサポートされているかどうかはわかりません。Chromeで作りました。

以下の例は、テーブルが別の行で構成されているように見せるための方法を示しています。また、最初の行には、tbodyセットアップで。お気軽にご利用ください！

サポート通知：IE8以降、Chrome、Firefox、Safari、Opera 4以降

.spacing-table {
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-size: 15px;
  border-collapse: separate;
  table-layout: fixed;
  width: 80%;
  border-spacing: 0 5px; /* this is the ultimate fix */
}
.spacing-table th {
  text-align: left;
  padding: 5px 15px;
}
.spacing-table td {
  border-width: 3px 0;
  width: 50%;
  border-color: darkred;
  border-style: solid;
  background-color: red;
  color: white;
  padding: 5px 15px;
}
.spacing-table td:first-child {
  border-left-width: 3px;
  border-radius: 5px 0 0 5px;
}
.spacing-table td:last-child {
  border-right-width: 3px;
  border-radius: 0 5px 5px 0;
}
.spacing-table thead {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.spacing-table tbody {
  display: table;
  table-layout: fixed;
  width: 100%;
  border-spacing: 0 10px;
}

<table class="spacing-table">
  <thead>
    <tr>
        <th>Lead singer</th>
        <th>Band</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td>Bono</td>
        <td>U2</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
        <td>Chris Martin</td>
        <td>Coldplay</td>
    </tr>
    <tr>
        <td>Mick Jagger</td>
        <td>Rolling Stones</td>
    </tr>
    <tr>
        <td>John Lennon</td>
        <td>The Beatles</td>
    </tr>
  </tbody>
</table>

セパレータ行を追加してみてください：

html：

<tr class="separator" />

css：

table tr.separator { height: 10px; }

表のセルの余白は変更できません。ただし、パディングは変更できます。TDのパディングを変更します。これにより、セルが大きくなり、パディングが増加した側からテキストが押し出されます。ただし、境界線がある場合でも、それが希望どおりになるとは限りません。

見てみましょう、別：国境崩壊属性（デフォルト）との境界線間隔をプロパティ。

まず、それらをborder-collapseで区切る必要があります。次に、border-spacingで列と行の間のスペースを定義できます。。

これらのCSSプロパティは両方とも、実際にはすべてのブラウザで十分にサポートされています。こちらを参照してください。

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

table, 
table td,
table th  {border: 1px solid black;}

<table>
  <tr>
    <td>Some text - 1</td>
    <td>Some text - 1</td>
  </tr>
  <tr>
    <td>Some text - 2</td>
    <td>Some text - 2</td>
  </tr>
  <tr>
    <td>Some text - 3</td>
    <td>Some text - 3</td>
  </tr>
</table>

はい、できます

tr.classname td {background-color:red; border-bottom: 5em solid white}

背景色が行ではなくtdに設定されていることを確認します。これはほとんどのブラウザで動作するはずです...（Chrome、ie＆ffテスト済み）

あなたborder-collapse: separate;はテーブルの上に設定する必要があります。ほとんどのブラウザのデフォルトスタイルシートはborder-collapse: collapse;、境界線の間隔を空けるで始まります。

また、border-spacing：はTDでなく、に進みTRます。

試してください：

<html><head><style type="text/css">
    #ex    { border-collapse: separate; }
    #ex td { border-spacing: 1em; }
</style></head><body>
    <table id="ex"><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table>
</body>

テーブルでは行の高さを使用できます。

<table style="width: 400px; line-height:50px;">

tr { 
    display: block;
    margin-bottom: 5px;
}

遅すぎる答え:)

tr要素にフロートを適用すると、margin属性を使用して2つの行の間にスペースを空けることができます。

table tr{
float: left
width: 100%;
}

tr.classname {
margin-bottom:5px;
}

行間の間隔の錯覚を作成するには、背景色を行に適用してから、白い色の太い境界線を作成して、「スペース」を作成します:)

tr 
{
   background-color: #FFD700;
   border: 10px solid white;
}

テーブルの間隔を指定する正しい方法は、セルパディングとセルスペースを使用することです。

<table cellpadding="4">

私は同様の問題に苦労しながらこれに出会いました。Varun Natraajの回答が非常に役立つことがわかりましたが、代わりに透明な境界線を使用します。

td { border: 1em solid transparent; }

透明な境界線には幅があります。

2015年に最も最近のブラウザーで動作します。シンプルなソリューション。透明では機能しませんが、Thoronwenの回答とは異なり、どのサイズでもレンダリングするために透明にすることはできません。

    tr {
      border-bottom:5em solid white;
    }

のdiv中に入れて、td次のスタイルを設定するだけですdiv：

margin-bottom: 20px;
height: 40px;
float: left;
width: 100%;

これは古いスレッドへの回答であり、要求された解決策ではない可能性があることを理解していますが、提案された解決策はすべて私が必要とするものではなかったものの、この解決策は私にとってはうまくいきました。

2つのテーブルセルがあり、1つは背景色、もう1つは境界線色です。上記のソリューションでは境界線が削除されるため、右側のセルは空中に浮いているように見えます。トリックをしたソリューションを置き換えることだったtable、trとtdテーブルは次のようになります。divタグと、対応するクラスでdiv id="table_replacer"、TRは次のようになり、div class="tr_replacer"そしてTDは次のようになりますdiv class="td_replacer"（もちろん、同様のdiv要素にタグを閉じる変更）

私の問題の解決策を得るには、CSSは次のとおりです：

#table_replacer{display:table;}
.tr_replacer {border: 1px solid #123456;margin-bottom: 5px;}/*DO NOT USE display:table-row! It will destroy the border and the margin*/
.td_replacer{display:table-cell;}

これが誰かを助けることを願っています。

<td />要素を<div />要素で埋め、好きなdivにマージンを適用できます。行間の視覚的なスペースのために、<tr />要素で繰り返しの背景画像を使用できます。（これは私が今日使用したソリューションであり、IE6とFireFox 3の両方で機能するようですが、これ以上テストしませんでした。）

また、サーバーコードを変更して<div />を<td />内に配置するのを嫌う場合は、jQuery（または同様の何か）を使用して、<td />の内容を<div / >、必要に応じてCSSを適用できるようにします。

または、間隔を追加する行間のマージンの高さで空白を追加するだけです

いくつかの注意点がある、シンプルでエレガントなソリューションを次に示します。

• 実際にギャップを透明にすることはできません。ギャップを特定の色にする必要があります。
• ギャップの上と下の境界のコーナーを丸めることはできません
• テーブルセルのパディングと境界を知る必要がある

それを念頭に置いて、これを試してください：

td {padding:5px 8px;border:2px solid blue;background:#E0E0E0}  /* lets say the cells all have this padding and border, and the gaps should be white */

tr.gapbefore td {overflow:visible}
tr.gapbefore td::before,
tr.gapbefore th::before
{
  content:"";
  display:block;
  position:relative;
  z-index:1;
  width:auto;
  height:0;
  padding:0;
  margin:-5px -10px 5px;  /* 5px = cell top padding, 10px = (cell side padding)+(cell side border width)+(table side border width) */
  border-top:16px solid white;  /* the size & color of the gap you want */
  border-bottom:2px solid blue; /* this replaces the cell's top border, so should be the same as that. DOUBLE IT if using border-collapse:separate */
}

あなたが実際にしているのは長方形を貼り付けることです ::before、ギャップを前に置きたい行のすべてのセルの上部にブロックをことです。これらのブロックはセルから少しはみ出して、既存の境界線と重なり、それらを非表示にします。これらのブロックは、上下の境界線を挟んでいるだけです。上部の境界線はギャップを形成し、下部の境界線はセルの元の上部の境界線の外観を再作成します。

テーブル自体とセルの周りに境界線がある場合は、「ブロック」の水平方向の余白をさらに増やす必要があることに注意してください。したがって、4pxのテーブル境界線の場合は、代わりに次を使用します。

margin:-5px -12px 5px;     /* 14px = original 10px + 2px for 'uncollapsed' part of table border */

また、テーブルでのborder-collapse:separate代わりにを使用している場合はborder-collapse:collapse、（a）テーブルの全ボーダー幅を使用する必要があります。

margin:-5px -14px 5px;     /* 14px = original 10px + 4px full width of table border */

...また、（b）ギャップの下に表示する必要があるボーダーの倍幅を置き換えます。

border-bottom:4px solid blue;     /* i.e. 4px = cell top border + previous row's bottom border */

この手法は、必要に応じて.gapafterバージョンに簡単に適用したり、行ギャップではなく垂直（列）ギャップを作成したりするのにも簡単に適用できます。

実際の動作を確認できるコードペンは次のとおりです。https：//codepen.io/anon/pen/agqPpW

ここでこれはスムーズに動作します：

#myOwnTable td { padding: 6px 0 6px 0;}

必要に応じてどのtdを指定すれば、より細かいレイアウトを作成できると思います。

これを上に示しています...

table tr{ float: left width: 100%; }  tr.classname { margin-bottom:5px; } 

垂直列の配置を削除しますので、使い方に注意してください

やってみました：

tr.classname { margin-bottom:5em; }

または、各tdも調整できます。

td.classname { margin-bottom:5em; }

または

 td.classname { padding-bottom:5em; }