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>

使用此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消失了。左上角和右上角，顶行消失...

Answer 1

没有内容的表格单元格降至最低。您需要通过CSS设置固定大小，甚至可能在单元格中放置一个空白字符以强制它保持打开状态：

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

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

背景图像不会影响元素的大小，因此您需要在背景变得可见之前强制元素具有一定的大小。

圆角与html表

1 个答案: