CSS：テーブルの行間にギャップを作成するにはどうすればよいですか？

94

結果のテーブルを次のように見せないことを意味します。

[=== ROW ===]
[=== ROW ===]
[=== ROW ===]
[=== ROW ===]

...そしてもっとこのように：

[=== ROW ===]

[=== ROW ===]

[=== ROW ===]

[=== ROW ===]

追加してみた

margin-bottom:1em;

tdとtrの両方にありますが、何も得られませんでした。何か案は？

html css

— MGOwen
ソース

2

なぜセルスペースとセルパディングをしないのですか？

— adatapost 2009

1

Cellspacingは、列間の間隔も指定します。

— rahul 2009

4

Cellspacingとcellpaddingは無効な（X）HTMLです。使用しないでください。

— freiksenet 2009

8

@freiksenet：あなたは間違っている。これらは完全に有効な厳格なHTML4（w3.org/TR/html401/struct/tables.html#h-11.2.1）、XHTML1（w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd）、さらにはXHTML1です.1（w3.org/MarkUp/DTD/xhtml-table-1.mod）。

— メルカトル

1

テーブルの2つの行の間

— ThisClark 2017年

213

必要なもの：

table {
    border-collapse: separate;
    border-spacing: 0 1em;
}

これは、1emの垂直方向のギャップがあり、水平方向のギャップがないことを前提としています。これを行っている場合は、行の高さの制御も検討する必要があります。

人々が与えた回答のいくつかが境界崩壊を含む一種の奇妙なもの：崩壊、その影響は質問が要求したものの正反対です。

— ジョン・ハウゲランド
ソース

そうですね、特定の列の間隔を広げようとしたので、テーブルに適用することは考えていませんでした

— ジョナサン。

4

このソリューションでは、特定の行に間隔を選択的に適用することはできません。

— Flimm 2014

15

質問はそれを要求しませんでした。

— John Haugeland、2014

これは良い考えですが、最初の行の上部のギャップを埋めるために、私は標準ではないがうまくいく回避策をとらなければなりませんでした。を与えるthead, tbody {position: relative; top: -{border-spacing-value} }。

— Farzad YZ

3

愛してると言ってもいいですか何てことだ。あなたは私のa $$を保存しました

— NikosKeyz

93

table {
    border-collapse: collapse;
}

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

最初にborder-collapseを設定しない限り、セルは何にも反応しません。（特に）TR要素が設定されたら、ボーダーを追加することもできます。

これがレイアウト用である場合は、DIVおよびより最新のレイアウト手法を使用することに移りますが、これが表形式のデータである場合は、ノックアウトしてください。私はまだ私のデータをWebアプリケーションでテーブルを多用しています。

— ライアン・フローレンス
ソース

テストしましたか？tdには、折りたたみの有無に関係なくパディングができるようです。ボーダーは折りたたみで機能しますが、IEでは機能しません。

— コビ

これはうまくいきました。マージンが機能しないのは困りますが、この場合は問題になりません。ありがとう。

— MGOwen 2009

30

これは本当に悪いアプローチです。セルを単に配置するのではなく、セルのボックスを変更して、セルを離して配置するためにセルを融合します。もう1つは、セルに背景が必要なことです。正しいアプローチは、境界線の分離を定義するために境界線の分離を使用して、境界線の崩壊ではなく、境界線の分離です。

— John Haugeland 2013年

1

これは実装されたCSS2のほぼ最初の部分です。ブラウザには、ピクセル精度のレイアウトに使用されていたHTMLバージョン用のテーブルギャップがすでに実装されているためです。はい、確かです。:)

— John Haugeland 2015

1

これは、仕様を読んだ人しか知らない、CSSの奇妙なコーナーの1つです。（驚くほど多数あります。同様に、フロートは基本的に実際に使用されている方法で使用しないでください。）

— John Haugeland

7

他の答えのどれも満足できない場合は、常に空の行を作成し、 CSSでそれを適切にスタイル設定して透明にすることができます。

— フリム
ソース

なぜ反対票か。他の回答には問題があります。rpfloの回答では、border-collapseを使用してセルのパディングを拡張し、セル間にスペースを作成するのではなく、セルを大きく表示する必要があります。John Haugelandの回答では、特定の行に選択的に間隔を適用することはできません。私は続けることができますが、この答えは他の答えがどれもしなかったときに私のユースケースでうまくいった1つのオプションです。

— Flimm 2014

2

CSSを使用して個々の行の高さを指定する匿名ユーザーの反対のアプローチは、個々の行を制御する必要があるという点で、ダミーのコンテンツをテーブルに追加するよりもはるかに優れています。

— John Haugeland 2014

偽の行は、テーブル行がテーブル行であると期待するツールを混乱させます（無効化のための重要なアクセシビリティツールや、エクスポート/ソート/再フォーマットなどのための一般的なプラグインなど）。原則として、偽物を押し込むのではなく、スタイルを使用してスタイルを制御する理由はたくさんあります。詳細については、セマンティックマークアップについてお読みください。

— MGOwen

@MGOwenこのシナリオで失敗するユーザー補助ツールと、それらがどのように失敗するかを教えてください。私は今、具体的なことを述べていないアクセシビリティアドバイスに懐疑的です。実際にはだれにも役に立たない悪いアクセシビリティアドバイスがたくさんあります（たとえば、HTML 5のドキュメントアウトラインアドバイスはすべて間違っていましたが、アクセシビリティツールはそうではありません）人々が彼らが働くと言う方法で働く）。

— Flimm

4

境界線がない場合、または境界線がありセル内の間隔が必要な場合はpadding、またはを使用できますline-height。私の知る限り、マージンはセルと行には影響しません。
セルの間隔のCSSプロパティはですがborder-spacing、IE6 / 7では機能しません（そのため、群集に応じて使用できます）。

他のすべてが失敗した場合はcellspacing、マークアップで古い属性を使用できますが、これにより列間の間隔も得られます。いくつかのCSSリセットは、ブラウザー間サポートを取得するためにとにかく設定することを提案しています：

/ * cellspacing="0"マークアップにはまだテーブルが必要です* /

— コビ
ソース

2

これは方法です（私はそれは不可能だと思っていました）：

最初に、テーブルに縦のボーダー間隔（たとえば5px）のみを設定し、横のボーダー間隔を0に設定します。次に、各行のセルに適切なボーダーを設定する必要があります。たとえば、各行の右端のセルには、上下左右に境界線が必要です。左端のセルには、上下左右に境界線が必要です。そして、これら2つの間の他のセルは、上下に境界線のみを持つ必要があります。この例のように：

<table style="border-spacing:0 5px; color:black">
    <tr>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-left:thin black solid;">left-most cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-right:thin black solid;">right-most cell</td>
    </tr>
    <tr>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-left:thin black solid;">left-most cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-right:thin black solid;">right-most cell</td>
    </tr>
    <tr>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-left:thin black solid;">left-most cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-right:thin black solid;">right-most cell</td>
    </tr>
</table>

— アラシュ・エスマエイリ
ソース

1

私の意見では、最も簡単な方法は、タグにパディングを追加することです。

td {
 padding: 10px 0
}

これがあなたに役立つことを願っています！元気！

— ホイ・ル
ソース

これにより、テーブル行内に余分なスペースが作成されます。テーブルの行に見栄えの悪い色がある場合。

— ココドコ2017年

1

単にあなたが使用することができますpadding-topし、padding-bottom上のtd要素。

ユニットはこのリストから何でもできます：

デモコード：

td
{
  padding-top: 10px;
  padding-bottom: 10px;
}

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

スニペットを展開

— アブラージャヒン
ソース

0

スペースの背景色をtdと同じにする場合は、TDのパディングが機能します

私の場合、ヘッダー行とその上にあるものの間の空白が要件でした

このスタイリングを単一のセルに適用することで、目的の分離を得ることができました。それをすべてのセルに追加する必要はありませんでした...おそらく最もエレガントではありませんが、セパレーター行よりもおそらくエレガントです。

<td colspan="10"> 
    <div class="HeaderRow" 
         style="margin-top:10px;">
            <%# Eval("VendorName")%>
     </div>
</td>

— 集合
ソース

-1

テーブルを使用したデザインに固執する場合は、コンテンツのない空の行を指定し、テーブルの各行の間に高さを指定することをお勧めします。

divを使用して、この複雑さを回避できます。各divにマージンを与えるだけです。

— ラフル
ソース

1

（表形式のデータのように）テーブルを使用する十分な理由がまだあります。そうです、空の行は確かにばかげたルートです：Pしかし、ボーダー崩壊という解決策があります。

— ライアンフローレンス

-1

CSSを使用して各行の高さを変更することもできます。

<head>
 <style>
 tr {
   height:40px;
 }
</style>
</head>

<body>
<table>

<tr> <td>One</td> <td>Two</td> </tr>
<tr> <td>Three</td> <td>Four</td> </tr>
<tr> <td>Five</td> <td>Six</td> </tr>

</table>
</body>

<td>要素の高さを変更することもできます。同じ結果が得られるはずです。

-1

<tr>すぐ下に別のものを作成し、コンテンツにスペースまたは高さを追加します<td>

たとえば、フィドルをチェックアウトします

https://jsfiddle.net/jd_dev777/wx63norf/9/

— ジェイディープ・チャウハン
ソース

これは悪い習慣だと考えられています。理由の1つは、ツール（無効なユーザー向けのリーダーなど）がテーブル行をテーブル行であると想定し、実際の行と混合した「偽の」行をエクスポート/読み取り/解釈することです。上記と同じ回答が2014年に初めて出されたのを見てください。

— MGOwen

1

@MGOwen、ご提案ありがとうございます。完全に合意

— Jaydeep Chauhan

-4

次のルールをtrに追加すると動作します

float: left

サンプル（IE9 offcourseで開く:)）：http ://jsfiddle.net/zshmN/

編集：これは多くの人が指摘したように合法的または正しい解決策ではありませんが、選択肢がなく、何かが必要な場合はIE9で機能します。

票を投じているすべての人は、正しい解決策も教えてください

— Sandeep Choudhary
ソース

3

このアプローチにより、セルに異なる次元のデータが含まれている場合、列の自動ライニングが防止されます-テーブルのマークアップは本質的に無意味です。提供されている例では十分に機能しますが、推奨される手法ではありません。セルのテキストを変更して、意味を確認します。

— verism

ちょっと@verism、申し訳ありませんが、私はあなたのポイントを理解しませんでした。もう少し説明してもらえますか？または、私がこのメソッドを広範囲に使用していて、このメソッドが失敗するシナリオに対処したいので、このメソッドが失敗するフィドルを提供できる場合。

— Sandeep Choudhary 2013

列の明確な描写はありません。つまり、表形式のデータは視覚的な構造を失い、読みにくくなります。jsfiddle.net/verism/zshmN/5

— verism

@verism yaこれは1つの問題ですが、固定幅の列を定義できます。これは良い解決策ではないことはわかっていますが、IE9で動作する他の解決策は見つかりませんでした

— Sandeep Choudhary 2013年

1

CSS仕様では、テーブルの行をフローティングにすることはできません。CSS2セクション17では、display：table-row要素がdisplay：table-row-group、-header-group、または-footer-group要素内にあることが必要です。ただし、セクション9のフローティングアルゴリズムは、匿名ブロックの親を挿入します。これは、テーブルの行に有効な親レイアウトがなくなり、ブラウザーが何をすべきかを推測していることを意味します。これは完全に不正確です。

— John Haugeland 2014