CSS Help

I have applied css style for a table by using below styles.

.Wrapperdiv
{
   text-align:center;
   width:100%;
   height:100%;
   
}

.Wrapperdiv Table /*Table*/
{
    text-align:left;
    margin-left:auto;
    margin-right:auto;/*Center this table*/
    margin-top:15px;
	border-right: #E3EDFA 1px solid;
	border-top: #E3EDFA 1px solid;
	border-left: #E3EDFA 1px solid;
	border-bottom: #E3EDFA 1px solid;
	 
}


.Wrapperdiv Table TH /*Table header*/
{
	border-right: #E3EDFA 1px solid;
	border-top: #E3EDFA 1px solid;
	border-left: #E3EDFA 1px solid;
	border-bottom: #E3EDFA 1px solid;
	font-size: 8pt;
	background-image: url(tblhdrbg.gif);
	background-repeat:repeat-x;
	color: #0F4F7A;
	font-weight:bold;
 
	text-align:left;
	font-family: Verdana, Tahoma;
	height: 35px;
}
 

.Wrapperdiv Table td /*Table cells*/
{
	 
	border-collapse:collapse;
	vertical-align:middle;
	height:25px;
	margin:3px  2px 3px  8px;
 }

<div class="Wrapperdiv">
<table>
            <tr><th>header</th></tr>
             <tr><td>cell 1</td></tr>
             <tr><td>cell 2</td></tr>
 </table>
 </div>

Code (markup):

I have used this style in lot of pages. but the thing is, i dont want the style applied in some td tags . let's say, "Cell 2". how to exclude css style applying to some particular cell.

Thanks in advance,
Thya

 

You can apply the opposite style to the cell you want. Create a class called .no-style and then apply the opposite style to it.

So for example, this will be used by default:

.Wrapperdiv Table TH /*Table header*/
{
border-right: #E3EDFA 1px solid;
border-top: #E3EDFA 1px solid;
border-left: #E3EDFA 1px solid;
border-bottom: #E3EDFA 1px solid;
font-size: 8pt;
background-image: url(tblhdrbg.gif);
background-repeat:repeat-x;
color: #0F4F7A;
font-weight:bold;

text-align:left;
font-family: Verdana, Tahoma;
height: 35px;
}

But to remove the the borders and bg image you would do:

.no-style {
border:none;
background:none;
}


BTW you can optmize your code.

This can be written as: margin:15px auto 0;

This can be written as border:1px solid #E3EDFA; (since you are using same thing for all sides)

This can be written as background:url(tblhdrbg.gif) repeat-x;

 

Thanks a lot GWiz