How to use a CSS on tr tag in html

Question

0.00/5 (No votes)

See more:

Hi I am not able to use css on tr tag i have declared .name class for tr tag but it is not making any change on the row, please provide some solution that how to use css on tr
<style>

XML

table.gridtable td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
    background-color: #ffffff;
}

table.gridtable tr.name {
    background-color: #999999;
        border-width: 1px;

}

</style>
</head>
<body>

<table class="gridtable">
<tr>
    <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr>
    <td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
    <td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
<tr class="name">
    <td>Test on tr.name Class</td><td>Text32B</td><td>Text 3C</td>
</tr>

Posted 7-Apr-14 0:43am

shiv7

Add a Solution

2 solutions

Solution 1

since you set background color for the table, it might not be overriding that style for the row. try using !important for the tr row class

HTML

table.gridtable tr.name {
    background-color: #999999 !important;
        border-width: 1px;
 
}

else try this

HTML

<table class = "table">
  <tr >
    <td>red</td>
  </tr>
  <tr>
    <td>red</td>
  </tr>
  <tr class="blue">
    <td>blue</td>
  </tr>
  <tr>
    <td>blue</td>
  </tr>
</table>

JavaScript

.blue {
    background-color: blue;
}
.table
{
    background-color: orange;
}
}

Posted 7-Apr-14 0:52am

Naz_Firdouse

Updated 7-Apr-14 0:57am

v2

Comments

shiv7 7-Apr-14 6:54am

Had used already but did not work

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Peter Leow · Accepted Answer · 2014-04-07T01:01:00

Solution 2

that is because all the td has follow this:

table.gridtable td

You have to specify the td in the last tr by adding a td after the tr.name

table.gridtable tr.name td {

Posted 7-Apr-14 1:01am

Peter Leow

Comments

shiv7 7-Apr-14 7:07am

Thanks a lot
table.gridtable tr.name td {
is working

Peter Leow 7-Apr-14 7:42am

You are welcome.