How to Give color To each row in table

Reply

asp.ambur

Member

399 Points

1101 Posts

How to Give color To each row in table

Nov 08, 2016 08:28 PM|asp.ambur|LINK

Hello

This is my html code

<table>
            <tr>
                <td style="width: 100px; height: 21px">
                    ABC</td>
            </tr>
            <tr>
                <td style="width: 100px">
                    DEF</td>
            </tr>
        </table>

ABC is in one row i want to give blue color border and 2px width

DEF is second row i want to give green color border and 2px width

How to do so

Reply

senthilwaits

Contributor

3310 Points

868 Posts

Re: How to Give color To each row in table

Nov 08, 2016 09:35 PM|senthilwaits|LINK

Try with this

<table class="myTable">
            <tr>
                <td style="width: 100px; height: 21px">
                    ABC</td>
            </tr>
            <tr>
                <td style="width: 100px">
                    DEF</td>
            </tr>
        </table>

and add the following CSS

.myTable tr:nth-child(odd) td {
    border: #0000ff 2px solid;
}

.myTable tr:nth-child(even) td {
    border: #00ff00 2px solid;
}

Refer this fiddle for the working version

Regards,

Senthil Kumar Sundaram

Reply

Nasser Malik

Star

13450 Points

2764 Posts

Re: How to Give color To each row in table

Nov 08, 2016 11:34 PM|Nasser Malik|LINK

Try following

<style>
        .myTable{
            border-spacing:1px;
            border-collapse: separate;
        }
        .myTable tr:nth-child(even) td{
            width: 100px; 
            height: 21px;
            border: 2px solid #0000ff;
        }

        .myTable tr:nth-child(odd) td{
            width: 100px;
            border: 2px solid #00ff00;
        }

    </style>
    <table class="myTable">
        <tr>
            <td>ABC</td>
        </tr>
        <tr>
            <td>DEF</td>
        </tr>
    </table>

Following is the code with multiple cells

<style>
        .myTable{
            border-spacing:1px;
            border-collapse: separate;
        }
        .myTable tr:nth-child(even) td{
            width: 100px; 
            height: 21px;
            border: 2px solid #0000ff;
        }

        .myTable tr:nth-child(odd) td{
            width: 100px;
            border: 2px solid #00ff00;
        }

    </style>
    <table class="myTable">
        <tr>
            <td>ABC</td><td>ABC</td><td>ABC</td>
        </tr>
        <tr>
            <td>DEF</td><td>DEF</td><td>DEF</td>
        </tr>
    </table>

Please Mark as Answer if find helpful -- Nasser --
Skype: maleknasser1
LinkedIn: https://www.linkedin.com/in/maliknasser

Reply

asp.ambur

Member

399 Points

1101 Posts

Re: How to Give color To each row in table

Nov 09, 2016 07:09 AM|asp.ambur|LINK

both query not working

as my control table is inside masterpage with updatepanel in that table i have

Reply

Cathy Zou

Star

8670 Points

2882 Posts

Re: How to Give color To each row in table

Nov 09, 2016 07:42 AM|Cathy Zou|LINK

Hi , asp.ambur，

Based on your needs, I make an example, you could refer to it:

Master Page:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td style="width: 100px; height: 21px;border:#0000ff 2px solid">
                    ABC</td>
            </tr>
            <tr>
                <td style="width: 100px;border:#00ff00 2px solid">
                    DEF</td>
            </tr>
        </table>
                <asp:Label runat="server" Text="Label in  Master" ForeColor="Red"></asp:Label>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

Content Page:

<%@ Page Title="" Language="C#" MasterPageFile="~/Test/Site1.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.Test.WebForm1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
   
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
  <hr />
    <h1>Content Page</h1>
  </asp:Content>

Solution2: you could create an stylesheet like below:

body {
}
  .myTable tr:nth-child(odd) td {
    border: #0000ff 2px solid;
}
.myTable tr:nth-child(even) td {
    border: #00ff00 2px solid;
}

In master page do as below:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="WebApplication2.Test.Site1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="~/StyleSheet1.css" rel="stylesheet" runat="server" type="text/css" />
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table class="myTable">
            <tr>
                <td style=" width: 100px;
        height: 21px">
                    ABC</td>
            </tr>
            <tr>
                <td style="width: 100px">
                    DEF</td>
            </tr>
        </table>
                <asp:Label runat="server" Text="Label in  Master" ForeColor="Red"></asp:Label>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

Output screenshot as below:

Best regards

Cathy

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

How to Give color To each row in table[Answered] RSS

4 replies

Shortcuts

How to Give color To each row in table

Re: How to Give color To each row in table

Re: How to Give color To each row in table

Re: How to Give color To each row in table

Re: How to Give color To each row in table