locked
Gridview Styling RRS feed

  • Question

  • User-1499457942 posted

    Hi

       I have Gridview in few content pages. I want to style Gridview , want to set Gridview Header row size , rows size , font etc.

    Secondly i want that effect is visible in all gridview

    Thanks

    Monday, November 5, 2018 11:28 AM

Answers

  • User409696431 posted

    GridView renders as a table.  Give all the GridViews the same class, and define your styles in an external CSS file.  Define your styles to target the table, table header, table cells, etc where the table has that class.

    Some examples:

    Set the GridView CssClass.

    <asp:GridView id="GridView1" CssClass="mygridview" runat="server" AutoGenerateColumns="False" DataSourceID="MyDataSource1">
    

    Style the table with that class in an external CSS file, and reference that CSS file in your page.

    table.mygridview
    {
    	color: #000099;
    }
    table.mygridview th
    {
    	font-weight: bold;
    	color:#006600;
    	font-size:1.1em;
    }
    table.mygridview td
    {
    	font-size: 1em;
    	padding: 3px;
    }
    table.mygridview td:nth-child(2){
    	text-align:right;
    }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, November 5, 2018 11:27 PM
  • User839733648 posted

    Hi JagjitSingh,

    If you just want to style the Header Row of Gridview, you could set the Font-Names as the font and Height as the header row size in HeaderStyle.

    More about HeaderStyle, you could refer to: https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.datagrid.headerstyle?view=netframework-4.7.2 

                    <HeaderStyle Font-Names="Arial" Height="100px"/>

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 6, 2018 2:47 AM

All replies

  • User409696431 posted

    GridView renders as a table.  Give all the GridViews the same class, and define your styles in an external CSS file.  Define your styles to target the table, table header, table cells, etc where the table has that class.

    Some examples:

    Set the GridView CssClass.

    <asp:GridView id="GridView1" CssClass="mygridview" runat="server" AutoGenerateColumns="False" DataSourceID="MyDataSource1">
    

    Style the table with that class in an external CSS file, and reference that CSS file in your page.

    table.mygridview
    {
    	color: #000099;
    }
    table.mygridview th
    {
    	font-weight: bold;
    	color:#006600;
    	font-size:1.1em;
    }
    table.mygridview td
    {
    	font-size: 1em;
    	padding: 3px;
    }
    table.mygridview td:nth-child(2){
    	text-align:right;
    }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, November 5, 2018 11:27 PM
  • User839733648 posted

    Hi JagjitSingh,

    If you just want to style the Header Row of Gridview, you could set the Font-Names as the font and Height as the header row size in HeaderStyle.

    More about HeaderStyle, you could refer to: https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.datagrid.headerstyle?view=netframework-4.7.2 

                    <HeaderStyle Font-Names="Arial" Height="100px"/>

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 6, 2018 2:47 AM