开发者

C# css table (css redesign)

开发者 https://www.devze.com 2023-02-20 04:06 出处:网络
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 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%; }
0

精彩评论

暂无评论...
验证码 换一张
取 消