is there a way to override a CSS style of: table td{} on just one of several tables? : The Official Microsoft ASP.NET Forums

Reply

kraznodar

Contributor

3332 Points

881 Posts

is there a way to override a CSS style of: table td{} on just one of several tables?

Aug 13, 2008 08:12 PM|LINK

In my style sheet I have this:

table td
{
   border-width: 1px;
   border-color: Black;
   border-collapse: True;
   border-style: Solid;
}

This applies it to all tables in my project. My wonderful users have decided that one particular table needs to have no gridlines. The w3c site says that border-style: hidden; will override this but when I apply this to my table the gridlines are still there. It doesn't matter if it is in the HTML, code behind after .Style.Clear(), or in another style class, it just doesn't work. Is there some way I'm missing to override the "table td" type of style?

Reply

Curt_C

All-Star

66014 Points

7639 Posts

Moderator

Re: is there a way to override a CSS style of: table td{} on just one of several tables?

Aug 13, 2008 08:42 PM|LINK

if you set it right in the tag for that TABLE it will override the CSS value(s).

Have you read the book? - ASP.Net 3.5 CMS Development (now on Kindle)
v5.1 of iTracker (Inventory Tracker Starter Kit) is out, Download it now!

Reply

sappidireddy

Participant

917 Points

221 Posts

Re: is there a way to override a CSS style of: table td{} on just one of several tables?

Aug 13, 2008 08:52 PM|LINK

Create a different class for that table and assign it.

You can overide css by specifying !Impartent like below

background-image: none !important;

Thanks,
Venkat
Dont forget to click "Mark as Answer" on the post that helped you

Reply

kraznodar

Contributor

3332 Points

881 Posts

Re: is there a way to override a CSS style of: table td{} on just one of several tables?

Aug 13, 2008 09:21 PM|LINK

Thanks for the reply Curt. I changed my td tags in the HTML to be like this:

and it renders to the browser that way. The problem is that when I pull it up in IE 7 the border is still there. In a page without the CSS class in the style sheet the table has no border.

I stripped the source from view->source down to just the code below and opened that in IE 7 and got the same thing. The w3c site says this is wrong and inline should override a style class in the header. Do you know of any fix?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

table td
{
   border-width: 1px;
   border-color: Black;
   border-collapse: True;
   border-style: Solid;
}

</style>
</head>
<body>
<div id="ctl00_CfasContent_GasPanel">

<table style="border:hidden; border-right:hidden; border-left:hidden; border-bottom:hidden; border-top:hidden;">
    <tr>
        <td style="border:hidden; border-right:hidden; border-left:hidden; border-bottom:hidden; border-top:hidden;">
             <input id="ctl00_CfasContent_rbGasPercentCC" type="radio" name="ctl00$CfasContent$Gas" value="rbGasPercentCC" />
        </td>
        <td style="border:hidden; border-right:hidden; border-left:hidden; border-bottom:hidden; border-top:hidden;">
            <input name="ctl00$CfasContent$txtGasPercentCC" type="text" id="ctl00_CfasContent_txtGasPercentCC" style="width:50px;text-align: center" size="20" />&nbsptest
        </td>
        <td style="border:hidden; border-right:hidden; border-left:hidden; border-bottom:hidden; border-top:hidden;">% change in natural gas fuel cost ($/MBTU) &nbsp    <span id="ctl00_CfasContent_RVGas1" style="color:Red;visibility:hidden;">Gas price % change must be between -15 and 15.</span></td>
    </tr>
    <tr>
        <td style="border:hidden; border-right:hidden; border-left:hidden; border-bottom:hidden; border-top:hidden;">
            <input id="ctl00_CfasContent_rbGasDollarCC" type="radio" name="ctl00$CfasContent$Gas" value="rbGasDollarCC" />
        </td>
        <td style="border:hidden; border-right:hidden; border-left:hidden; border-bottom:hidden; border-top:hidden;">
            <input name="ctl00$CfasContent$txtGasDollarCC" type="text" id="ctl00_CfasContent_txtGasDollarCC" style="width:50px;text-align: center" size="20" />
        </td>
        <td style="border:hidden; border-right:hidden; border-left:hidden; border-bottom:hidden; border-top:hidden;">$/MBTU change in natural gas fuel cost &nbsp    <span id="ctl00_CfasContent_RVGas2" style="color:Red;visibility:hidden;">$/MBTU change must be between -5 and 5.</span></td>
    </tr>
</table>

</div>
</body>
</html>

Reply

NHOQUE

Contributor

5103 Points

851 Posts

Re: is there a way to override a CSS style of: table td{} on just one of several tables?

Aug 14, 2008 12:28 AM|LINK

Try the following. You dont need to go through each "td" and put inline style. Here is the simplest one,

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Borderless Table</title>
    <style type="text/css">
    table td
    {
       border-width: 1px;
       border-color: Black;
       border-collapse: True;
       border-style: Solid;
    }
    table.bdrless td{
       border-width: 0px;
    }


    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <table>
        <tr>
            <td>one</td>
            <td>two</td>
        </tr>
        <tr>
            <td>one</td>
            <td>two</td>
        </tr>
    </table>
    <br />
    <table class="bdrless">
        <tr>
            <td>one</td><td>two</td>
        </tr>
        <tr>
            <td>one</td>
            <td>two</td>
        </tr>
    </table>
    </div>
    </form>
</body>
</html>

You have to put the style only in the <table> tag, nowhere else. Isn't it simple?

Thanks.

HOQUE MD.NAZMUL
[n°web]

Marked as answer by kraznodar on Aug 14, 2008 03:11 PM

Reply

kraznodar

Contributor

3332 Points

881 Posts

Re: is there a way to override a CSS style of: table td{} on just one of several tables?

Aug 14, 2008 03:16 PM|LINK

NHOQUE

    <style type="text/css">
    table td
    {
       border-width: 1px;
       border-color: Black;
       border-collapse: True;
       border-style: Solid;
    }
    table.bdrless td{
       border-width: 0px;
    }

    </style>
    <table class="bdrless">
        <tr>
            <td>one</td><td>two</td>
        </tr>
        <tr>
            <td>one</td>
            <td>two</td>
        </tr>
    </table>
You have to put the style only in the <table> tag, nowhere else. Isn't it simple?

Excellent! Yes it is simple and works great. You just saved me a lot of trouble. I'm still wondering why the order of processing and order of precedence both of which are defined by the w3c and should control this situation are ignored by IE 7 but I guess that is for MS to figure out. As long as this method works I'm good to go.

is there a way to override a CSS style of: table td{} on just one of several tables? RSS

5 replies

kraznodar

is there a way to override a CSS style of: table td{} on just one of several tables?

Curt_C

Re: is there a way to override a CSS style of: table td{} on just one of several tables?

sappidireddy

Re: is there a way to override a CSS style of: table td{} on just one of several tables?

kraznodar

Re: is there a way to override a CSS style of: table td{} on just one of several tables?

NHOQUE

Re: is there a way to override a CSS style of: table td{} on just one of several tables?

kraznodar

Re: is there a way to override a CSS style of: table td{} on just one of several tables?

NHOQUE

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft