How to externally style with CSS the specific 3 td tags on the html table generated by the pager row of a asp.net gridview control


Tags: asp.net,css,gridview,css-selectors

Problem :

The working version of the html table generated markup with css is here: http://jsfiddle.net/nexU/JkUCQ/1/

As you can see all I need is to set these align and width styles for those 3 specific TD tags on a external css and override the ones that are automatically generated by asp control.

Thanks in advance for your help.

/* I want 1st pagerRow TD to have width 10% I want 2nd pagerRow TD to have width 80% I want 3rd pagerRow TD to have width 10%

*/

/------------style.css------------/

.pagerRow
{
    background: #3D6AA2;
    font-weight: normal;
    color: #fff;
    text-align: left;
    height: 30px;
}

.pagerRow td
{
    border: solid 1px red;
}

/------------ part of html generated by control------------/

<table id="mainContacts" class="contactsBase" cellspacing="0" border="1" style="width: 100%;">
    <tbody>
        <tr class="header_row">
        </tr>
        <tr class="odd">
        </tr>
        <tr class="even">
        </tr>
        <tr class="odd">
        </tr>
        <tr class="even">
        </tr>
        <tr class="odd">
        </tr>
        <tr class="even">
        </tr>
        <tr class="odd">
        </tr>
        <tr class="even">
        </tr>
        <tr class="odd">
        </tr>
        <tr class="even">
        </tr>
        <tr class="odd">
        </tr>
        <tr class="pagerRow" align="center">
            <td colspan="5">
                <table cellspacing="0" cellpadding="0" border="0" width="100%">
                    <tbody>
                        <tr>
                            <td align="left" width="25%"> <!--How to set these align and width styles on external css and override these ones that are automatically generated by asp control?-->
                            </td>
                            <td align="center" width="50%"> <!--How to set these align and width styles on external css and override these ones that are automatically generated by asp control?-->
                                <p> 1,2,3,4,5 </p>
                            </td>
                            <td align="right" width="25%"> <!--How to set these align and width styles on external css and override these ones that are automatically generated by asp control?-->
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>


Solution :

Working fiddle: http://jsfiddle.net/JkUCQ/4/
(updated based on your new input)

Add this to your CSS:

.pagerRow tr td:nth-child(1) {
    width:10% !important;
}
.pagerRow tr td:nth-child(2) {
    width:80% !important;
}
.pagerRow tr td:nth-child(3) {
    width:10% !important;
}

    CSS Howto..

    How to use one icon from different image files?

    How to echo individual css classes for li's?

    How to draw X Sign with SVG+CSS?

    how to center perfectly image and text inline in the center of page

    How do I create CSS only tabs/pages with #hash URLs?

    How to style DOM element with CSS that was created with JavaScript function

    CSS-how to text-indent a nested unordered list

    css how to make an elements margin-bottom go to bottom of its container

    How do I get rid of an element's offset using CSS?

    How to change css pseudo elements in javascript? [duplicate]

    I can't figure out how to stop the margin-top from making my child div overflow its parent

    How to use CSS for formatting Crystal Report in Winform?

    How much time should I put into validating my HTML and CSS?

    How to apply CSS on texte label beside an input?

    How can I make one