2011-01-10 10 views
4

HTMLテーブル内の2つの行(tr)の間に視覚的区切り記号を付ける可能性はありますか?htmlテーブルで2つのtrを区切る方法

私は<br>で試しましたが、これは有効なコードではありません。

休憩後にtrにパディングトップを追加しようとしましたが動作しません。

現在、私は空のラインを使用します。

<tr><td colspan=\"X\">&nbsp;</td></tr> 

を私はこれは私は変更がある場合colspanが調整されていることを確認する必要があり、特にとして、最善の解決策だとは思わないの数であります列。

これを解決する方法はありますか?

+0

set border-top? – Cine

+0

私は実際には空の行を好みます。だから国境は何が欲しいのではない。 – Pit

答えて

4

は、(元の答えは、ルールの下に残っている)私の再読み込み質問ではなく、質問のタイトルを反映するためにを編集します。

あなたが(むしろ単に空白以外)のビジュアルセパレーターをしたい場合は、単に使用します。

td { 
border-bottom: 1px solid #ccc; /* or whatever specific values you prefer */ 
} 

テーブル行の間の間隔を増加させる唯一の方法は、私は現在の意識だと、個々の行/セルにpaddingを使用することです:

td { 
    padding: 0.5em 1em; 
    border: 1px solid #ccc; 
} 

JS Fiddle demo

透明(またはbackground-color -edの境界線)を使用する可能性がありますが:<tr />要素はあなたが常にパディングやボトムを追加することができますしかし、すべてのブラウザでスタイル可能ではありません

table { 
    border-collapse: separate; 
} 

td { 
    border-top: 0.5em solid transparent; 
    border-bottom: 0.5em solid transparent; 
} 

td:hover { 
    border-color: #ccc; 
} 

JS Fiddle demo

1

tr内のセルに接します。

1

実際、私はこの目的のために常に別のtrを使用しています。私はセパレータクラスを介してそれらのスタイルを設定します(例えば、その中のもの)。

colspan-problemについては、Colspan all columnsを参照してください。

関連する問題