Last post Nov 09, 2016 07:42 AM by Cathy Zou
Member
399 Points
1101 Posts
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
Contributor
3310 Points
868 Posts
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
Star
13450 Points
2764 Posts
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>
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
8670 Points
2882 Posts
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
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
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
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
and add the following CSS
Refer this fiddle for the working version
Senthil Kumar Sundaram
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
Following is the code with multiple cells
Skype: maleknasser1
LinkedIn: https://www.linkedin.com/in/maliknasser
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
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:
Content Page:
Solution2: you could create an stylesheet like below:
In master page do as below:
Output screenshot as below:
Best regards
Cathy
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.