テーブル行に余白を追加する方法<tr>

Question

私は多くの行を含むテーブルを持っています。これらの行の一部はclass="highlight"であり、行のスタイルを変更して強調表示する必要があります。私がやろうとしているのは、これらの行の前後にいくつか余分なスペースを入れて、他の行と少し離れて見えるようにすることです。

私はmargin-top:10px;margin-bottom:10px;でこれを行うことができると思ったが、うまくいかなかった。誰でもこれをやり遂げる方法を知っていますか？ここにHTMLがあり、tbodyの2番目のtrをクラスのハイライトに設定しました。

<table> 
<thead> 
    <tr> 
    <th>Header 1</th> 
    <th>Header 2</th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
    <td>Value1</td> 
    <td>Value2</td> 
    </tr> 
    <tr class="highlight"> 
    <td>Value1</td> 
    <td>Value2</td> 
    </tr> 
    <tr> 
    <td>Value1</td> 
    <td>Value2</td> 
    </tr> 
    <tr> 
    <td>Value1</td> 
    <td>Value2</td> 
    </tr> 
</tbody> 
</table> 

Answer 1

テーブル行にはマージン値を設定できません。あなたは詰め物を増やすことができますか？それはうまくいくでしょう。そうでない場合は、class="highlighted"行の前後に<tr class="spacer"></tr>を挿入することができます。

Answer 2

あなたは<tr>が自分自身をのスタイルすることはできませんが、私はあなたがあなたの分析を見てみることをお勧め強くなり、この

tr.highlight td {padding-top: 10px; padding-bottom:10px} 

Answer 3

のように、「ハイライト」<tr> SAスタイル内<td> Sを与えることができますIE7以下のユーザーがサイトにアクセスした回数を確認できます。 IE7のサポートを中止できるようになりました。これは、CSSテーブルを使用できることを意味します。これにより、作業が非常に簡単になります。あなたはCSSを使用しようとする可能性があり

Answer 4

は全体TRをインデントに変換：

tr.indent { 
    -webkit-transform: translate(20px,0); 
    -moz-transform: translate(20px,0); 
} 

私はこれが有効な解決策だと思います。私のOSX上でFirefox 16、Chrome 23、Safari 6で正常に動作するようです。

table tr { 
    border-bottom: 4px solid; 
} 

各列の間の垂直間隔の4pxを追加します。

Answer 5

は、ここで私はそれをやったきちんとした方法です。そして、あなたは最後の子にその境界線を取得しないしたい場合：CSS3擬似セレクターのみselectivizrとIE 8で上下に動作することを

table tr:last-child { 
    border-bottom: 0; 
} 

はリマインダー。

Answer 6

行の高さは、クラス前に、このスタイルを追加することが可能溶液

tr 
{ 
    line-height:30px; 
} 

Answer 7

ことができる=「強調表示」 パディング底と ディスプレイを細胞にDIVを追加インラインテーブル

Answer 8

ありますあなたには、いくつかの余分なスペースを追加したいこと：

<tr class="highlight"> 
<td><div>Value1</div></td> 
<td><div>Value2</div></td> 
</tr> 
tr.highlight td div { 
margin-top: 10px; 
} 

Answer 9

border-spacingプロパティは、このparticuために動作しますラーケース。

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

Reference。

Answer 10

私はこれが一種だと知っていますが、私はちょうど同じ行に沿って何か作業をしています。これを行うことはできませんでしたか？

tr.highlight { 
    border-top: 10px solid; 
    border-bottom: 10px solid; 
    border-color: transparent; 
} 

希望します。後か：疑似セレクタに加え、背景色を理解していないブラウザの問題を避けるかもしれない

tr.highlight td:last-child:after 
{ 
    content: "\0a0"; 
    line-height: 3em; 
} 

がある前にいない問題

Answer 11

別の可能性は、擬似セレクタを使用することです。

しかしながら、欠点は、最後のセルの後に余分な空白を追加することです。

Answer 12

次のように単純なjQueryコードをあきらめて挿入しました。あなたは私のような多くのtrを持っている場合、これはtrの後にtrを追加します。 デモ：https://jsfiddle.net/acf9sph6/

<table> 
    <tbody> 
    <tr class="my-tr"> 
     <td>one line</td> 
    </tr> 
    <tr class="my-tr"> 
     <td>one line</td> 
    </tr> 
    <tr class="my-tr"> 
     <td>one line</td> 
    </tr> 
    </tbody> 
</table> 
<script> 
$(function() { 
     $("tr.my-tr").after('<tr class="tr-spacer"/>'); 
}); 
</script> 
<style> 
.tr-spacer 
{ 
    height: 20px; 
} 
</style> 

Answer 13

テーブル行の間のマージンの外観を与えるためにハックは、それらを背景と同じ色の境界線を与えることです。これは、HTMLマークアップを変更できない第三者のテーマをスタイリングするときに便利です。例：

tr{ 
    border: 5px solid white; 
} 

Answer 14

marginはtrに無視されているので、私は通常のでbackground-colorは国境の下に塗られない透明border-bottomまたはborder-topを設定し、padding-boxにbackground-clipプロパティを設定することで、回避策を使用します。

table { 
    border-collapse: collapse; /* [1] */ 
} 

th, td { 
    border-bottom: 5px solid transparent; /* [2] */ 
    background-color: gold; /* [3] */ 
    background-clip: padding-box; /* [4] */ 
} 

1. 必ず細胞が共通の境界を共有しますが、完全に任意です。このソリューションはそれなしで動作します。
2. 5px値は
3. デモをここで見るbackgroundがborder

の下に描かれていない得ることを確認します/セルあなたの行のbackground-colorを設定します。あなたは

を達成したいのマージンを表しますhttp://codepen.io/meodai/pen/MJMVNR?editors=1100

background-clipは、all modern browserでサポートされています。 （そしてIE9 +）

また、border-spacingを使用することもできます。しかし、これはborder-collapseがcollapseに設定されていると機能しません。

Answer 15

行の余白を模倣する方法は、擬似セレクタを使用してtdにスペーシングを追加することです。

.highlight td::before, .highlight td::after 
{ 
    content:""; 
    height:10px; 
    display:block; 
} 

このように、ハイライトクラスでマークされたものは、上下に分けられます。

https://jsfiddle.net/d0zmsrfs/

Answer 16

まず第一に、それは現代のレンダリングでは動作しませんので、<tr>または<td>にマージンを入れしようとしないでください。

• ソリューション1

マージンは動作しませんが、作業を行うパディング：

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

警告：これも遠くから国境をプッシュします境界線が表示されている場合は、代わりにソリューション2を使用できます。

• ソリューション2

そうのようなあなたのリールテーブルの<tr>のそれぞれの間に別の<tr>を入れ、近い要素に境界線を維持し、マージンを模倣する：

<tr> 
    <td> Hello </td><td> Hello</td> 
</tr> 

<tr style="height: 20px;"> <!-- Mimic the margin --> 
</tr> 

<tr> 
    <td> Hello </td><td> Hello</td> 
</tr>