CODEWITHSUNDEEP
asp.netcssdatagridhtml-tableinternet-explorer-10
usr4896260
usr4896260

Reputation: 1507

css specify first tr in table asp.net datagrid

I'm new to CSS and I'm trying to accomplish the following on IE10:

I have the asp datagrid with the css class "maintbl"

<asp:DataGrid CssClass="maintbl" ID="dg" runat="server"  AutoGenerateColumns="False">
<Columns>
    <asp:BoundColumn ReadOnly="true" DataField="UpdateOn" DataFormatString="{0:MMMM d, yyyy}" HeaderText="Date Modified" SortExpression="UpdateOn" ></asp:BoundColumn>
    <asp:BoundColumn DataField="Message" HeaderText="Message" SortExpression="Message"></asp:BoundColumn>
</Columns>
</asp:DataGrid>

The html generated is similar this:

<table class="maintbl">
 <tbody>
   <tr>
    <td></td>
    <td></td>
   </tr>
 </tbody>
</table>

I'm trying to apply css specifically to the first tr. I've tried this in css file but it's not working.

.maintbl table tbody tr:first-child {
        border: 1px solid white;
        background-color: #167F92;
        color:  white;
        padding: 1em; 
        text-align: center;
}

Please help me with what I'm doing wrong.

Upvotes: 1

Views: 142

Answers (1)

chrisg
chrisg

Reputation: 76

Try changing your css selector to be something like

table.maintbl tbody tr:first-child

In your original selector, it was looking for the .maintbl element, then a child table element, then tbody, then tr. Now it is looking for a table element with the .maintbl class (and then looking for child elements from there).

Upvotes: 1

Related Questions