css - rounded corner with html table -


i have following html table make rounded corner box.

<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 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> 

with 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;   } 

currently giving corner images in html side images css , works fine. want move corner images css when convert 2 table corner cells divs column or row disappear. example if top right , bottom right corner right coulmn disappears. top left , top right, top row disappears...

table cells no content collapse down minimum. you'd need set fixed-sizes via css, , possibly put blank character cell force stay open:

<td id="topleft">&nbsp;</td>  #topleft {     background: ...;     width: 15px;     height: 15px; } 

background images don't affect sizing of element, need force element have size before background become visible.


Comments

Popular posts from this blog

c# - SharpSVN - How to get the previous revision? -

c++ - Is it possible to compile a VST on linux? -

url - Querystring manipulation of email Address in PHP -