角を丸くした角のテーブル

Question

丸い角のボックスを作るためのテーブルには、次のHTMLがあります。

<div class="tipHolder" > 
<table width="200" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF"> 

<tr> 
<td><img src="png\tile_top_left.png" style="float: right;" ></td> 
<td id="tipTop"><!-- Blank top section --></td> 
<td ><img src="png\tile_top_right.png" ></td> 
</tr> 

<tr> 
<td id="tipLeft"><!-- Blank left section --></td> 
<td> 
<!--################### 
Enter your content here 
################### --> 

rgergergfthrthrthr 
</td> 
<td id="tipRight"><!--Blank right section --></td> 
</tr> 

<tr> 
<td ><img src="png\tile_bottom_left.png" style="float: right;" ></td> 
<td id="tipBottom"><!--Blank bottom section --></td> 
<td ><img src="png\tile_bottom_right.png" ></td> 
</tr> 

</table> 
</div> 
</body> 
</html> 

現在、私は、HTML内のコーナー画像そのものではなく、CSSからサイドイメージを与えているこのCSS

#tipTop { 
    background-image:url('tile_top.png'); 
    background-repeat:repeat-x; 

} 
#tipLeft { 
    background-image:url('tile_left.png'); 
    background-repeat:repeat-y; 
    background-position:right; 
} 
#tipRight{ 
    background-image:url('tile_right.png'); 
    background-repeat:repeat-y; 
} 
#tipBottom { 
    background-image:url('tile_bottom.png'); 
    background-repeat:repeat-x; 
} 

と

、これは正常に動作します。コーナーイメージをCSSにも移動したいのですが、2つのテーブルコーナーセルをdivに変換すると、列または行が消えます。たとえば右上と右下隅に右クーロンが消えたら左上と右上、最上部の行が消えます。

Answer 1

内容のない表のセルは最小限にまで縮小します。あなたは、CSSを経由して、固定サイズを設定する必要があり、そして可能性も開いたままにそれを強制するために細胞内に空白文字を入れたい：

<td id="topleft">&nbsp;</td> 

#topleft { 
    background: ...; 
    width: 15px; 
    height: 15px; 
} 

背景画像は、要素のサイズに影響を与えることはありませんので、あなたバックグラウンドが表示される前に要素をある程度の大きさにする必要があります。