Set HTML Table alternate row color using CSS

lingers
 
on Oct 11, 2021 06:07 AM
1659 Views

Please i want to apply {background: #D1DDF1} and tr:nth-child(odd) {background: #EFF3FB} in the style sheet of my aspx pages, but it is not working

My code

public partial class Default25 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            //Populate DataTable
            DataTable dt = new DataTable();
            dt.Columns.Add("Name");
            dt.Columns.Add("Age");
            dt.Columns.Add("City");
            dt.Columns.Add("Country");
            dt.Rows.Add();
            dt.Rows[0]["Name"] = "Mudassar Khan";
            dt.Rows[0]["Age"] = "27";
            dt.Rows[0]["City"] = "Mumbai";
            dt.Rows[0]["Country"] = "India";

            //Bind Datatable to Labels
            lblName.Text = dt.Rows[0]["Name"].ToString();
            lblAge.Text = dt.Rows[0]["Age"].ToString();
            lblCity.Text = dt.Rows[0]["City"].ToString();
            lblCountry.Text = dt.Rows[0]["Country"].ToString();
        }
    }
    protected void btnExport_Click(object sender, EventArgs e)
    {
    }
}

please help

<form id="form1" runat="server">
    <div>
    <link href="StyleSheet.css" rel="stylesheet" />
    <asp:Panel ID="pnlPerson" runat="server">
    <table border="1" class="tableDetails">
        <tr>
            <td colspan="2" class="header">
                <b>Personal Details</b>
            </td>
        </tr>
        <tr>
            <td><b>Name</b></td>
            <td>
                <asp:Label ID="lblName" runat="server"></asp:Label></td>
        </tr>
        <tr>
            <td><b>Age</b></td>
            <td>
                <asp:Label ID="lblAge" runat="server"></asp:Label></td>
        </tr>
        <tr>
            <td><b>City</b></td>
            <td>
                <asp:Label ID="lblCity" runat="server"></asp:Label></td>
        </tr>
        <tr>
            <td><b>Country</b></td>
            <td>
                <asp:Label ID="lblCountry" runat="server"></asp:Label></td>
        </tr>
    </table>
</asp:Panel>
<asp:Button ID="btnExport" runat="server" Text="Export" OnClick="btnExport_Click" />
    </div>
</form>

Stylesheet.css

#tableDetails {
    font-family: Arial;
    font-size: 8px;
    width: 200px;
border: 1px solid black;

}
 
.header {
    background-color: #18B5F0;
    height: 18px;
    color: black;
    border: 1px solid white;
    text-align: center;
}
.div {
    background-color: #18B5F0;
    height: 18px;
    color: black;
    border: 1px solid white;
    text-align: center;
}

tr:nth-child(even) {background: #D1DDF1}
tr:nth-child(odd) {background: #EFF3FB}
Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Oct 11, 2021 07:47 AM
on Feb 13, 2022 09:55 AM

Hi lingers,

Refer below code.

Note: For this sample i have used temporary DataTable. For more details refer Dynamically create DataTable and bind to GridView in ASP.Net.
 

HTML

<div>
    <link href="StyleSheet.css" rel="stylesheet" />
    <asp:Panel ID="pnlPerson" runat="server">
        <table border="1" class="tableDetails">
            <tr>
                <td colspan="2" class="header">
                    <b>Personal Details</b>
                </td>
            </tr>
            <tr>
                <td><b>Name</b></td>
                <td>
                    <asp:Label ID="lblName" runat="server"></asp:Label></td>
            </tr>
            <tr>
                <td><b>Age</b></td>
                <td>
                    <asp:Label ID="lblAge" runat="server"></asp:Label></td>
            </tr>
            <tr>
                <td><b>City</b></td>
                <td>
                    <asp:Label ID="lblCity" runat="server"></asp:Label></td>
            </tr>
            <tr>
                <td><b>Country</b></td>
                <td>
                    <asp:Label ID="lblCountry" runat="server"></asp:Label></td>
            </tr>
        </table>
    </asp:Panel>
    <br />
    <asp:Button ID="btnExport" runat="server" Text="Export"  />
</div>

Code

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        //Populate DataTable
        DataTable dt = new DataTable();
        dt.Columns.Add("Name");
        dt.Columns.Add("Age");
        dt.Columns.Add("City");
        dt.Columns.Add("Country");
        dt.Rows.Add();
        dt.Rows[0]["Name"] = "Mudassar Khan";
        dt.Rows[0]["Age"] = "27";
        dt.Rows[0]["City"] = "Mumbai";
        dt.Rows[0]["Country"] = "India";

        //Bind Datatable to Labels
        lblName.Text = dt.Rows[0]["Name"].ToString();
        lblAge.Text = dt.Rows[0]["Age"].ToString();
        lblCity.Text = dt.Rows[0]["City"].ToString();
        lblCountry.Text = dt.Rows[0]["Country"].ToString();
    }
}

CSS

#tableDetails {
    font-family: Arial;
    font-size: 8px;
    width: 200px;
    border: 1px solid black;
}

.header {
    background-color: #18B5F0;
    height: 18px;
    color: black;
    border: 1px solid white;
    text-align: center;
}

.div {
    background-color: #18B5F0;
    height: 18px;
    color: black;
    border: 1px solid white;
    text-align: center;
}

tr:nth-child(even) {
    background-color: #D1DDF1
}

tr:nth-child(odd) {
    background-color: #EFF3FB
}

Screenshot