小さな高さの空白のテーブル行を挿入する

Question

私はヘッダー行といくつかのデータ行からなるテーブルを持っています。私がしたいのは、ヘッダーとデータ行の間に空白行を作成することですが、この空白行の高さを他の行よりも小さくして（そういう大きなギャップがないようにします）。

どうすればこの問題を解決できますか？

次のようにテーブルのための私のHTMLマークアップのコードは次のとおりです。

<table class="action_table"> 
    <tbody> 
     <tr class="header_row"> 
      <td>Header Item</td> 
      <td>Header Item 2</td> 
      <td>Header Item 3</td> 
     </tr>    
     <tr class="blank_row"> 
      <td bgcolor="#FFFFFF" colspan="3">&nbsp;</td> 
     </tr> 
     <tr class="data_row"> 
      <td>Data Item</td> 
      <td>Data Item 2</td> 
      <td>Data Item 3</td> 
     </tr> 
    </tbody> 
</table> 

Answer 1

は以下の投稿しましたあなたはあなたが終わったという結果を得るべきです。

CSS

.blank_row 
{ 
    height: 10px !important; /* overwrites any other rules */ 
    background-color: #FFFFFF; 
} 

HTML

<tr class="blank_row"> 
    <td colspan="3"></td> 
</tr> 

私は念のために!importantプロパティを追加したようなあなたの現在のスタイルシートが見えるか見当がつかないので。しかし可能であれば、後でそれを混乱させる大きな可能性を考慮して、スタイルシートの宣言に頼ることはめったにないので、それを削除する必要があります。

Answer 2

はこのお試しください：ちょうどCSSルール（とやや改善のマークアップ）を追加

<td bgcolor="#FFFFFF" style="line-height:10px;" colspan=3>&nbsp;</td> 

Answer 3

テーブル内にスペースを追加する必要はありません。 this jsFiddleを参照してください。
（ギャップを明るい灰色にしたので、見ることができますが、透明に変更できます）

表の行を表示目的に使用すると、テーブル乱用が発生します。

Answer 4

私はこのシンプルなラインを試みたまで、私は仕事に何かを得ることができませんでした：

<p style="margin-top:0; margin-bottom:0; line-height:.5"><br /></p> 

（私は[おそらく3を得るために表を悪用して、あなたの心のコンテンツ にフィラー行の高さを変化させることができます私はその後、私は、私はこの質問にはすでに答えを持って知っているコメントに

Answer 5

をいただければ幸い素人だけど、私はもっと簡単に見つけた）下部に沿って

をラインアップしたかったテキストの列（箱）これを行う方法。

ちょうどあなたが空の行を持つようにしたいテーブルに

<tr height = 20px></tr> 

を追加します。それは私のプログラムでうまく動作し、おそらく最速の解決策です。