2009-05-28 4 views
5

私は行間を分離するために空のテーブル行を持っています。すべてのセルが空であれば表の行が表示されますか?

<tr> 
    <td colspan="5"></td> 
</tr> 

IE、FF、Opera、Safariでレンダリングされます。問題は、その中にいくつかのコンテンツを入れるべきか、それをそのまま残してもいいかどうかです。

同様:

<tr> 
    <td colspan="5">&nbsp;</td> 
</tr> 
+0

空白行をスペースに使用すると、データ構造が壊れます。 おそらく、theadまたはtbody要素のさまざまなデータブロックをラッピングし、間隔を設定するようにスタイリングする方がよいでしょう。 – Quentin

答えて

11

さてあなたは、行が表示されていることを確認するために、列のコンテンツとして&nbsp;を置くことができます。より良い方法は、スペーシングにCSSを使用することです。

+1

+1これは実際にCSSを使用してください。 –

+1

CSSは動作しません。区切り文字を白色にしながら、背景色でセルを塗りたい。私がセルにパディングを置くと、パディングされた領域も埋まります。私はそれを望んでいない。 – User

0

すでに試したことがあるかもしれませんが、行間にスペースを追加しようとするとパディングを追加しようとしました。

CELLSPACING =長さ(セル間の間隔)

CELLPADDING =長さ(セル内間隔)

カール

1

あなたは内のコンテンツに置きたい場合は、ノーブレーキング・スペースを使用します:&nbsp;、通常の空白ではなく

6

意味的に空の行は目的を果たすのか、それとも単にレイアウトのためのものなのでしょうか?後者の場合は、空の行を削除し、CSSを使用して区切りを指定することを検討する価値があります。例えば。

<tr class="separate-below"> 
    <td>Data before separater</td><td>More Data</td>... 
</tr> 
<tr> 
    <td>Data after separater</td><td>More Data</td>... 
</tr> 

スタイルシートで以下の場合:

TR.separate-below TD,TR.separate-below TH { 
    border-bottom: 1em solid white; /* use the background colour of a cell here */ 
} 

代わりに、表要素にルール=「グループ」を追加すること<せる(一緒に行のグループ・ブロックに複数<TBODY>要素を使用することができtbody >要素は上下に水平境界線を得、<colgroup>要素は左右に境界線を得る要素)

<table rules="groups"> 
<thead> 
    <tr><th>Header</th><th>Header</th>...</tr> 
</thead> 
<tbody> 
    <tr><td>Data</td><td>Data</td>...</tr> 
    <tr><td>Data</td><td>Data</td>...</tr> 
    ... 
</tbody> 
<tbody> 
    <tr><td>Data</td><td>Data</td>...</tr> 
    ... 
</tbody> 
... 
</table> 
3

this exampleでご覧になれますように、&nbsp;を使用しているW3Schoolsからは、あなたが望むことを行うための最善の方法です。

table { empty-cells:show; } 
+0

1. w3fools、2. link rot。それとは別に、私は ' ' - 表のセルに反対していません。 – vaxquis

0

。それは完全に有効であり、意味論的です。

+0

行のすべてのセルが空の場合、これは機能しません。 – Matijs

0

あなたはグループテーブルの行に複数のtbodyのタグを使用することができます。空のセルは、以下のCSSを使用することができます表示されることを保証するために

1

これは非常に古い質問ですが、誰かがまだ解決策を必要とする場合(問題がdisplay: table-cellまたはtable-row elementsで存在する)

ここソリューションです:

.emptyElement:after{ 
    content: "\00a0"; 
} 
1

私は私の解決策を追加したいが、 @Dariusz Sikorskiソリューションの変更。

td:empty:after, th:empty:after { 
    content: "\00a0"; 
} 
関連する問題