CODEWITHSUNDEEP
css
Lokesh Masih
Lokesh Masih

Reputation: 11

How to change the color of first row of first table using css

I have a table structure like this 

<table>
    <tr>
        <td>Name</td>
        <td>Info</td>
        <td>Surmane</td>
    </tr>
    <tr>
        <td>A</td>
        <td>
            <table>
                <tr>
                    <td>Id</td>
                    <td>10</td>
                </tr>
                <tr>
                    <td>Name</td>
                    <td>AA</td>
                </tr>
                <tr>
                    <td>Age</td>
                    <td>25</td>
                </tr>
                <tr>
                    <td>Address</td>
                    <td>AAA</td>
                </tr>
            </table>
        </td>
        <td>AAAA</td>
    </tr>
    <tr>
        <td>B</td>
        <td>
            <table>
                <tr>
                    <td>Id</td>
                    <td>10</td>
                </tr>
                <tr>
                    <td>Name</td>
                    <td>BB</td>
                </tr>
                <tr>
                    <td>Age</td>
                    <td>25</td>
                </tr>
                <tr>
                    <td>Address</td>
                    <td>BBB</td>
                </tr>
            </table>
        </td>
        <td>BBBB</td>
    </tr>
    <tr>
        <td>C</td>
        <td>
            <table>
                <tr>
                    <td>Id</td>
                    <td>10</td>
                </tr>
                <tr>
                    <td>Name</td>
                    <td>CC</td>
                </tr>
                <tr>
                    <td>Age</td>
                    <td>25</td>
                </tr>
                <tr>
                    <td>Address</td>
                    <td>CCC</td>
                </tr>
            </table>
        </td>
        <td>CCCC</td>
    </tr>
</table>

Now i want to change the color of first table->first row (Name, Info, Surname) using css. The css should not affect the second table->first row(Id,10)

Please suggest me any idea Thanks

Upvotes: 0

Views: 2461

Answers (7)

davbuc
davbuc

Reputation: 537

How about adding a class to the first <tr> like <tr class="color"> and then just change the color with .color { color: #fff; } ?

Upvotes: 0

Suvendu Paul
Suvendu Paul

Reputation: 5

td > table tr:first-child td {
    background: none;
}
tr:first-child td {
    background:#ff0000;
}

Upvotes: 0

Biswas Khayargoli
Biswas Khayargoli

Reputation: 1024

The simplest answer using inline css:

<tr style="color:red;">
<td>col1</td>
<td>col2</td>
<td>col3</td>
</tr>

Upvotes: 1

chiapa
chiapa

Reputation: 4412

Try this:

.hey {
    color: red;
}
<table>
    <tr class="hey">
        <td>Name</td>
        <td>Info</td>
        <td>Surmane</td>
    </tr>
    <tr>
        <td>A</td>
        <td>
            <table>
                <tr>
                    <td>Id</td>
                    <td>10</td>
                </tr>
                <tr>
                    <td>Name</td>
                    <td>AA</td>
                </tr>
                <tr>
                    <td>Age</td>
                    <td>25</td>
                </tr>
                <tr>
                    <td>Address</td>
                    <td>AAA</td>
                </tr>
            </table>
        </td>
        <td>AAAA</td>
    </tr>
    <tr>
        <td>B</td>
        <td>
            <table>
                <tr>
                    <td>Id</td>
                    <td>10</td>
                </tr>
                <tr>
                    <td>Name</td>
                    <td>BB</td>
                </tr>
                <tr>
                    <td>Age</td>
                    <td>25</td>
                </tr>
                <tr>
                    <td>Address</td>
                    <td>BBB</td>
                </tr>
            </table>
        </td>
        <td>BBBB</td>
    </tr>
    <tr>
        <td>C</td>
        <td>
            <table>
                <tr>
                    <td>Id</td>
                    <td>10</td>
                </tr>
                <tr>
                    <td>Name</td>
                    <td>CC</td>
                </tr>
                <tr>
                    <td>Age</td>
                    <td>25</td>
                </tr>
                <tr>
                    <td>Address</td>
                    <td>CCC</td>
                </tr>
            </table>
        </td>
        <td>CCCC</td>
    </tr>
</table>

Upvotes: 0

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123387

:not(td) > table > tbody > tr:first-child td {
   color: red
}

Since there's no information about the parent, siblings and outer markup I've specified :not(td) as admittable direct parent of your outermost table (that is any element except a td)

Furthermore, since you have also inner tables I had to specify > tbody > because browsers usually insert a automatically a tbody element and without it the selector would also match the first row of inner table (where id 10 is specified).

Codepen : http://codepen.io/anon/pen/vEPLEb

Result

enter image description here

Upvotes: 4

Dragos Stoica
Dragos Stoica

Reputation: 1935

You should set a class or id for your desired tag and set background in css as below (and please mark the answer as correct if helps you):

 <!DOCTYPE html>
<html>
<head>
<style>
.TestClass{
    background-color: yellow;
}
</style>
</head>
<table>
            <tr class="TestClass">
                <td>Name</td>
                <td>Info</td>
                <td>Surmane</td>
            </tr>
            <tr>
                <td>A</td>
                <td>
                    <table>
                        <tr>
                            <td>Id</td>
                            <td>10</td>
                        </tr>
                        <tr>
                            <td>Name</td>
                            <td>AA</td>
                        </tr>
                        <tr>
                            <td>Age</td>
                            <td>25</td>
                        </tr>
                        <tr>
                            <td>Address</td>
                            <td>AAA</td>
                        </tr>
                    </table>
                </td>
                <td>AAAA</td>
            </tr>
            <tr>
                <td>B</td>
                <td>
                    <table>
                        <tr>
                            <td>Id</td>
                            <td>10</td>
                        </tr>
                        <tr>
                            <td>Name</td>
                            <td>BB</td>
                        </tr>
                        <tr>
                            <td>Age</td>
                            <td>25</td>
                        </tr>
                        <tr>
                            <td>Address</td>
                            <td>BBB</td>
                        </tr>
                    </table>
                </td>
                <td>BBBB</td>
            </tr>
            <tr>
                <td>C</td>
                <td>
                    <table>
                        <tr>
                            <td>Id</td>
                            <td>10</td>
                        </tr>
                        <tr>
                            <td>Name</td>
                            <td>CC</td>
                        </tr>
                        <tr>
                            <td>Age</td>
                            <td>25</td>
                        </tr>
                        <tr>
                            <td>Address</td>
                            <td>CCC</td>
                        </tr>
                    </table>
                </td>
                <td>CCCC</td>
            </tr>
        </table>
</body>
</html>

Upvotes: 0

jsg
jsg

Reputation: 1264

You could change colour with css

<table>
        <tr>
            <td style="color:red;">Name</td>
            <td style="color:red;">Info</td>
            <td style="color:red;">Surmane</td>
        </tr>
        <tr>
            <td>A</td>
            <td>
                <table>
                    <tr>
                        <td>Id</td>
                        <td>10</td>
                    </tr>
                    <tr>
                        <td>Name</td>
                        <td>AA</td>
                    </tr>
                    <tr>
                        <td>Age</td>
                        <td>25</td>
                    </tr>
                    <tr>
                        <td>Address</td>
                        <td>AAA</td>
                    </tr>
                </table>
            </td>
            <td>AAAA</td>
        </tr>
        <tr>
            <td>B</td>
            <td>
                <table>
                    <tr>
                        <td>Id</td>
                        <td>10</td>
                    </tr>
                    <tr>
                        <td>Name</td>
                        <td>BB</td>
                    </tr>
                    <tr>
                        <td>Age</td>
                        <td>25</td>
                    </tr>
                    <tr>
                        <td>Address</td>
                        <td>BBB</td>
                    </tr>
                </table>
            </td>
            <td>BBBB</td>
        </tr>
        <tr>
            <td>C</td>
            <td>
                <table>
                    <tr>
                        <td>Id</td>
                        <td>10</td>
                    </tr>
                    <tr>
                        <td>Name</td>
                        <td>CC</td>
                    </tr>
                    <tr>
                        <td>Age</td>
                        <td>25</td>
                    </tr>
                    <tr>
                        <td>Address</td>
                        <td>CCC</td>
                    </tr>
                </table>
            </td>
            <td>CCCC</td>
        </tr>
    </table>

Upvotes: 0

Related Questions