locked
How to Give color To each row in table RRS feed

  • Question

  • User2033107836 posted

    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

    Tuesday, November 8, 2016 8:28 PM

Answers

  • User-707554951 posted

    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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, November 9, 2016 7:42 AM

All replies

  • User-654786183 posted

    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

    Tuesday, November 8, 2016 9:35 PM
  • User-183374066 posted

    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>

    Tuesday, November 8, 2016 11:34 PM
  • User2033107836 posted

    both query not working

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

    Wednesday, November 9, 2016 7:09 AM
  • User-707554951 posted

    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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, November 9, 2016 7:42 AM