與html表格圓角

我有以下的HTML表格來製作一個圓角框。與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>

這個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; 
}

目前，我給在HTML角落的圖像本身，而是從CSS側面圖像，並能正常工作。我想將角落圖像移動到CSS，但是當我將任何兩個表格角單元格轉換爲div時，列或行消失。例如，如果我右上角和右下角右側coulmn消失。頂部左側和頂部右側，頂部行消失...

來源

2011-06-30 anon

http://border-radius.com/ – Jason

我必須對圖像進行此操作 – anon

您必須爲此使用表格和圖像嗎？節哀順變。 –

沒有內容的表格單元摺疊到最小。你需要通過CSS設置固定的大小，甚至可能把一個空白字符進入細胞內，迫使它繼續開放：

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

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

背景圖像不會影響元素的大小，所以你在背景變得可見之前需要強制元素具有一定的尺寸。

來源

2011-06-30 17:24:31

與html表格圓角

回答

相關問題