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"> </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
Post a Comment