TBODY要素間にスペースを置く方法

私はこのようなテーブルを持っています：

<table>
    <tfoot>
        <tr><td>footer</td></tr>
    </tfoot>
    <tbody>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
    </tbody>
</table>

各tbody要素の間にスペースを入れたいのですが、パディングとマージンが機能しません。何か案は？

国境がなくてもかまわない場合は、これを試してください。

<style>
table {
  border-collapse: collapse;
}

table tbody {
  border-top: 15px solid white;
}
</style>

<table>
    <tfoot>
        <tr><td>footer</td></tr>
    </tfoot>
    <tbody>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
    </tbody>
</table>

ブラウザのサポート要件によっては、次のようなものが機能します。

tbody::before
{
  content: '';
  display: block;
  height: 15px;

}

空のテーブル要素を使用してページをレイアウトすることについて、人々は常に物議を醸す意見を持っています（この回答の反対票から明らかです）。私はこれを認識していますが、「すばやく汚れた」方法で作業しているときは、この方法を使用する方が簡単な場合があります。

過去のプロジェクトで空の行を使用して、テーブル行のグループを配置しました。スペーサー行に独自のcssクラスを割り当て、そのクラスの高さを定義しました。この高さは、テーブル行のグループの上下のマージンとして機能しました。

    .separator{
             height: 50px;
    }

   <table>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>

           <tr class="separator" colspan="2"></tr>

           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>

           <tr class="separator" colspan="2"></tr>

           tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
   </table>

テーブルセルに境界線がない場合は、スタイルシートの一般的なセルまたは行の高さを定義して、テーブルのすべての行を均等に配置することもできます。

tr{
   height: 40px;
}

私は適切に複数のトラブルの間隔にあった<tbody>と::beforeの存在下で、擬似<tr>含む<td>ブラウザのカップルでROWSPANと。

基本的に、次の<tbody>ような構造の場合：

<tbody>
    <tr>
        <td>td 1</td>
        <td rowspan"2">td 2</td>
        <td>td 3</td>
        <td>td 4</td>
    </tr>
    <tr>
        <td>td 1</td>
        <td>td 2</td>
        <td>td 4</td>
    </tr>
</tbody>

そして、あなたは誰が::beforeこのような疑似要素にCSSを書くことを勧めるのかに従います：

tbody::before
{
    content: '';
    display: block;
    height: 10px;
}

これは行スパンに影響し、2番目のテーブルが最初のテーブルに<tr>いくつあるかを示し<td>ます。

したがって、そのような問題に遭遇した場合の解決策は::before、次のように疑似スタイルを設定することです。

tbody::before
{
    content: '';
    display: table-row;
    height: 10px;
}

ここにフィドルがあります

これは、すべてのブラウザーで使用できるわけではない：first-childに依存する別の可能性です。

<style>
table {
  border-collapse: collapse;
}

td {
  border: 1px solid black;
}

tbody tr:first-child td {
  padding-top: 15px;
}

</style>

<table>
    <tfoot>
        <tr><td>footer</td></tr>
    </tfoot>
    <tbody>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
    </tbody>
</table>

ただ、設定displayとしてblock、それが動作します。

table tbody{
    display:block;
    margin-bottom:10px;
    border-radius: 5px;
}

上記のすべての回答のうち、プレゼンテーションとコンテンツの分離を維持しているのはdjenson47の回答のみです。折りたたみボーダーモデルメソッドの欠点は、テーブルのボーダーまたはセルスペース属性を使用して個々のセルを分離できなくなることです。これは良いことであり、いくつかの回避策がありますが、それは苦痛である可能性があります。だから私は最初の子の方法が最もエレガントだと思います。

または、TBODYクラスのオーバーフロープロパティを「可視」以外に設定することもできます。この方法では、分離した境界モデルも保持できます。

<style>
tbody {
    overflow: auto;
    border-top: 1px solid transparent;
}
</style>
<table>
    <tfoot>
        <tr><td>footer</td></tr>
    </tfoot>
    <tbody>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
    </tbody>
</table>

パディングはTDに適用できるため、+記号でトリックを実行できます。次に、tbodyの最初のTRのTDにトップパディングを付けることができます。

// The first row will have a top padding
table tbody + tbody tr td {
    padding-top: 20px;
}

// The rest of the rows should not have a padding
table tbody + tbody tr + tr td {
    padding-top: 0px;
}

「tbody + tbody」を追加したので、最初のtbodyには上部パディングがありません。ただし、必須ではありません。

私が知る限り、欠点はありません:)、しかし古いブラウザをテストしていませんでした。

border-spacingテーブル行グループのあるテーブルでを使用して、それらのグループの間にスペースを追加できます。ただし、間隔を空けたグループと間隔を空けたグループを指定する方法はないと思います。

<table>
  <thead>
    ...
  </head>
  <tbody>
    ...
  </tbody>
  <tbody>
    ...
  </tbody>
  <tfoot>
    ...
  </tfoot>
</table>

CSS

table {
  border-spacing: 0px 10px; /* h-spacing v-spacing */
}

新しい答え

<tbody>タグはいくつでも使用できます。今までW3Cで問題ないことを知りませんでした。以下の解決策が機能しない（それが機能する）と言うのではなく、あなたがしようとしていることを行うには、<tbody>タグクラスを割り当ててから、次の<td>ようにCSSを介して個々のタグを参照します：

table tbody.yourClass td {
    padding: 10px;
}

そしてあなたのHTMLはこうして：

<table> 
<tbody>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
</tbody>
<tbody class="yourClass">    
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
</tbody>
<tbody>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
</tbody>
</table>

その男を試してみてください:)

古い答え

何をしても、空白行を挿入しないでください...

テーブルに複数のtbody要素を含めることはできません。あなたができることはあなたの<tr>要素にクラスまたはID属性を設定し、対応する<td>タグにパディングを与えることです：

table {
    border-collapse: collapse;
}

tr.yourClass td {
    padding: 10px;
}

topとbottomに<tr>追加クラスを割り当てて、それぞれ上または下のパディングのみを行うようにすることもできます。

tr.yourClass.topClass td {
    padding: 10px 0 0 0;
}

tr.yourClass.bottomClass td {
    padding: 0 0 10px 0;
}

HTMLでは、<tr>タグは次のようになります。

<table> 
<tbody>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr class="yourClass topClass"><td>Text</td></tr>
<tr class="yourClass"><td>Text</td></tr>
<tr class="yourClass bottomClass"><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
<tr><td>Text</td></tr>
</tbody>
</table>

お役に立てれば！

djensen47の回答は新しいブラウザーではうまく機能しますが、指摘されたとおり、IE7では機能しません。

古いブラウザをサポートするためのこの問題の私の回避策は、div内で各セルのコンテンツをラップすることでした。次に、マージントップをdivに追加します。

<table class="tbl">
<tr></tr>
<tr></tr>
<tr></tr>
<tr><td><div></div></td></tr>
</table>

CSS

.tbl tr td div {
    height:30px;
    margin-top:20px;
}

高さの設定により、セルは少なくとも30pxの高さに保たれ、div内で使用されるセルの色がテキストの周囲で折りたたまれないようにします。margin-topは、行全体を高くすることにより、目的のスペースを作成します。

自分で解決しようとしているときにこれに遭遇しました。<br>終了</tbody>タグの直前にタグを配置することに成功しました。これは純粋に視覚的な修正ですが、テストしたほとんどのブラウザで機能するようです。

<table>
    <tbody>
        <tr>
            <td></td>
        </tr>
        <br>
    </tbody>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>

同様にアクセスできる必要があります。