I have this problem; I'm currently doing some modification on a web application that generates tables. Basically I need to change how the table is presented, e.g. add rounded corners on it.
I have 3 cells
________________________
| cell 1 | cell 2 | cell 3 |
------------------
As of now, what I try to do is add a background image using a class tag on cell 1 and cell 3. cell 1 is good, the only problem is with cell 3... as the image is stuck on the left of the tag. I t开发者_如何学Goried pushing it to the right with text-align but apparently it's the wrong command. I was wondering as to how I can push the image to the right of cell 3.
.table{position: relative; bacground:#ffffff; border:0px; border-collapse: collapse;}
.cell1, .cell3 {position:relative; height:40px; width:50; margin-bottom:-1}
.cell2 {width: 100px;}
.cell1{background: url(/imageleft.gif) no-repeat #ffffff;}
.cell2{background: url(/imageright.gif) no-repeat #ffffff; text-align: right;}
Any thoughts are appreciated!
Is it about background-image, right? Then you should be able to use background position property.. like:
.cell3 {background: url(/imageleft.gif) no-repeat #ffffff top right;}
The easiest way would be to wrap the table in a DIV and then give that DIV the rounded corners.
HTML:
<div class="table_wrapper">
<table>...</table>
</div>
CSS: (Red background to show effect)
.table_wrapper { background:red; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; padding:10px; }
.table_wrapper table { width:100%; }
精彩评论