How to Style Template field in Grid View (aspx page and CSS attached)


Tags: asp.net,css,gridview,styles

Problem :

i am trying to style my second column "mentor name" as i used css it give style to whole Grid i also tried "control styl css class = (some other css file)" and "item styl horizontal align=right" and also change property align = right by using # in css file but template field do not allow "id" to implement css my .aspx page and css ar below,

.mGrid {   
    width: 100%;   
    background-color: #fff;   
    margin: 0px 0 0px 0;   
    border:  0px #525252;   

}  

.mGrid table
{
    border:0px;
}

.mGrid td {   
    padding: 2px;   
    border-width:  0px ;   
    background-color:#3A3F3E;
    color: #fff;   
    text-align:left;
}  
td#Mname  {   
    text-align:left;
}  
.mGrid th {   
    padding: 4px 2px;   
    color: #fff;  
    background-color:#3A3F3E; 
    border-width: 0px ;   
    font-size: 0.9em;   
    text-align:center;
}  



<asp:GridView  Width="300px" ID="GridView1" runat="server" AutoGenerateColumns="False"
                    Font-Size="10pt" OnRowCreated="GridView1_RowCreated" CssClass="mGrid">
                    <Columns>
                        <asp:BoundField DataField="mentor_id" HeaderText="Image" />
                        <asp:TemplateField HeaderText="Image">
                            <ItemTemplate>
                                <asp:Image ID="Image2" runat="server" ImageUrl="~/images/small_image.png" />
                            </ItemTemplate>
                        </asp:TemplateField>

                        <asp:TemplateField  HeaderText="Mentor Name">
                        <ItemTemplate>
                            <asp:Label ID="Label1" Text='<%#Eval("mentor_FirstName")+ "</br> " + "<b>Experience: </b>"+Eval("mentor_experience") %> ' runat="server"></asp:Label>
                        </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>

hopes for your suggestions thanks in advance



Solution :

use td+td it will be applied to the Second td of the grid.

.mGrid td+td {   
     text-align:left !important;
}
.mGrid td+td+td {   
     text-align:left !important;
}

Here is a good post on this. styling the last td in a table with css


    CSS Howto..

    How to make all Contact 7 Fields the same size?

    CSS: how to calculate margin inside a div for a fluid layout

    How to make a div fill up remaining horizontal space

    How can I use CSS to keep content in its own column?

    How to give background image in CSS? [closed]

    how to create 100% vertical line in css

    How to include SASS files and CSS files into version repository and developement cycle

    how to draw a vertical line between two option boxes using css

    How is box-shadow returned in IE9?

    Asp.Net how to apply a css style to all the control of it's kind

    How to not inherit CSS styles from parents? [duplicate]

    how to position element equally from left and right sides?

    How to create a custom shape - css

    How to change a css element based on other element

    Prevent div from showing after slideUp() - jQuery

    How to change format of long text in cell?

    How do I use CSS to to vertically center align an image in a div?

    CSS: How to position a div in the center with dynamic width

    How to create tabs using Javascript and Jquery

    How to fix sizes when I developed my website with 'more space' display setting on macbook retina

    CSS: How to use vmin unit in IE9?

    How to make a header that changes position (like Pinterest)

    (CSS) Set Id for Class How to Use

    How to improve the performance of this CSS animation?

    How to overflow in CSS/HTML? [closed]

    How to create a button with a CSS-animated background?

    How to fit an image according to screen size

    How can I get the current state of my div animation?

    How not differ tableview focused rows from other rows?

    How to add materialize css to an angularjs project?