How to apply CSS to a particular asp.net table?

Question

I have downloaded a .css style sheet from a website that include many styling for table. I want to apply that .css style sheet to a particular asp.net table. So in aspx I have,

          <asp:Table cssClass="downloadedCss">
          </asp:Table>

In the css stylesheet I downloaded it has many things such as ..

           table {}
           caption{}
           td, th  {}
           tr {}
           thead th, tfoot th {}
           tbody td a  {}
           tbody td a:visited  {}
           tbody td a:hover {}
           tbody th a  {}
           tbody th a:hover {}
           tbody td+td+td+td a {}
           tbody td+td+td+td a:visited  {}
           tbody th, tbody td {}
           tfoot td {}
           tbody tr:hover  {}

How to make all those css properties to apply for just the table (downloadedCss class)

Solution 1

An ASP.NET Table will render as a HTML Table.

Your example will render like:

<table class="downloadedCss">
</table>

Therefore your current CSS rules will all apply to this table. If you want these styles to only apply to this table, then specify the class name in the CSS rules.

       table.downloadedCss {}
       table.downloadedCss caption{}
       table.downloadedCss td, table.downloadedCss th  {}
       table.downloadedCss tr {}
       table.downloadedCss thead th, table.downloadedCss tfoot th {}
       table.downloadedCss tbody td a  {}
       table.downloadedCss tbody td a:visited  {}
       table.downloadedCss tbody td a:hover {}
       table.downloadedCss tbody th a  {}
       table.downloadedCss tbody th a:hover {}
       table.downloadedCss tbody td+td+td+td a {}
       table.downloadedCss tbody td+td+td+td a:visited  {}
       table.downloadedCss tbody th, table.downloadedCss tbody td {}
       table.downloadedCss tfoot td {}
       table.downloadedCss tbody tr:hover  {}

Solution 2

If you change

table {}

to

table.downloadedCss {}

Then add that before all the other styles, then that will only apply those to that table. e.g.

table.downloadedCss caption {}
table.downloadedCss td, th {}

However I would probably strip out a lot of that css as I doubt you would need all of that.

Solution 3

<table CssClass="pnlstudentDetails">
        <tr>
            <td>
            </td>
        </tr>
    </table>

To apply Css for all the td elements under the specific table or panel or div try this code .
 .pnlstudentDetails td
        {
            height: 40px;
            vertical-align: middle;
            text-align: left;
            margin-top: 10px;
        }