CODEWITHSUNDEEP
cssstylesheethtml-table
jestges
jestges

Reputation: 3740

Apply style to particular row in a table

Hi I've a table like below and I wanted to apply style for only tr which is belongs to section. 

<table>
    <thead>
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
        </tr>
    </tbody>
</table>

When I try like below it is applying for all trs including trs.

<style type="text/css">
tr
{
height:30px
}
</style>

How can I restrict this style to apply only for header part.

Upvotes: 1

Views: 7731

Answers (4)

Doan Cuong
Doan Cuong

Reputation: 2624

Try this:

<style type="text/css">
tr
{
height:30px
}

thead > tr:first-child
{
//put anything you want here
}
</style>

Upvotes: 1

Keval Doshi
Keval Doshi

Reputation: 748

use it like this

<tr class="my_class">

</tr>

then in your CSS, refer it using a "." infront of your classname('my_class')

.myclass{
    //your styles go here
}

Upvotes: 1

damien hawks
damien hawks

Reputation: 512

You can add a class to that tr and specify that class in the css, like this:

<table>
    <thead>
        <tr class="give-style">
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
        </tr>
    </tbody>
</table>

And in the css:

<style type="text/css">
.give-style
{
height:30px
}
</style>

That should do the trick, please choose this as the correct answer if it solves your doubt by clicking on the tick symbol to the left.

Upvotes: 1

Jaykishan
Jaykishan

Reputation: 1499

use,

th
{
height:30px
}

Or else you can use class

Upvotes: 2

Related Questions