8
Answers

background color of a specific html table row <tr>

Photo of Shehzad

Shehzad
9y
434
1
Hi All,
 
I wanted to make a background color yellow of a specific html table row.
I have tried to set background color of row to yellow it is getting yellow, But row border is not getting colored.
I have also tried to make it as <th> instead of <td>.
 
I also do not want to collapse table border.
 
Could advise/guide.
 
Thanks
 
Shehzad 
 
 

Answers (8)

0
Photo of Shehzad
NA 153 14k 9y
Hi Manas,
 
Challenge here is i don't want to cellspacing/padding zero and don't want to collapse border as
it will effect other rows in table.
 
Regards
 
Shehzad 
 
 
 
 
 
0
Photo of Shehzad
NA 153 14k 9y
Hi Arul,
 
As mentioned in my question i don't want to collapse border.
 
Regards
 
Shehzad 
 
 
0
Photo of Manas Mohapatra
NA 29.3k 3.3m 9y
Try with below code:
 
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table cellspacing = "0" cellpadding="0" style="border: 2px solid green">
<tr>
<td>
ONE
</td>
<td>
ONE
</td>
<td>
ONE
</td>
</tr>
<tr style="background-color:yellow">
<td>
THREE
</td>
<td>
THREE
</td>
<td>
THREE
</td>
</tr>
<tr>
<td>
FOUR
</td>
<td>
FOUR
</td>
<td>
FOUR
</td>
</tr>
</table>
</body>
</html>
0
Photo of Arul R
NA 1.3k 706 9y
Try this code
 
<style >
tbody tr td {
padding: 12px;
text-align: center;
}
</style>
 
<table style="border: 2px solid green; border-collapse: collapse;">
<tbody>
<tr>
<td>ONE </td>
<td>ONE </td>
<td>ONE </td>
</tr>
<tr>
<td>TWO </td>
<td>TWO </td>
<td>TWO </td>
</tr>
<tr style="background-color: yellow">
<td>THREE </td>
<td>THREE </td>
<td>THREE </td>
</tr>
<tr>
<td>FOUR </td>
<td>FOUR </td>
<td>FOUR </td>
</tr>
<tr>
<td>FIVE </td>
<td>FIVE </td>
<td>FIVE </td>
</tr>
</tbody>
</table>
 
Let me know for any thing more....
If your problem solved means kindly Accept my answer
 
 
 
0
Photo of Shehzad
NA 153 14k 9y
Hi Manas,
 
Below is the sample code  and image.
FYI I am also using Jquery in the application.
 
Regards
 
Shehzad 
 
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table cellspacing = "5" cellpadding="8" style="border: 2px solid green">
<tr>
<td>
ONE
</td>
<td>
ONE
</td>
<td>
ONE
</td>
</tr>
<tr>
<td>
TWO
</td>
<td>
TWO
</td>
<td>
TWO
</td>
</tr>
<tr style="background-color:yellow">
<td>
THREE
</td>
<td>
THREE
</td>
<td>
THREE
</td>
</tr>
<tr>
<td>
FOUR
</td>
<td>
FOUR
</td>
<td>
FOUR
</td>
</tr>
<tr>
<td>
FIVE
</td>
<td>
FIVE
</td>
<td>
FIVE
</td>
</tr>
</table>
</body>
</html>
0
Photo of Manas Mohapatra
NA 29.3k 3.3m 9y
Can you share the code how are trying to set Background color to yellow.
0
Photo of Rajeesh Menoth
NA 24.7k 629.6k 9y
Hi,
 
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr bgcolor="#FF0000">
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<p>The bgcolor attribute is not supported in HTML5. Use CSS instead.</p>
</body>
</html>
Reference : 
 
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_tr_bgcolor 
0
Photo of Arul R
NA 1.3k 706 9y
Try this code 
 
<table>
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text="First Name"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
</tr>
<tr style="background-color: yellow">
<td>
<asp:Label ID="Label2" runat="server" Text="Last Name"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</td>
</tr>
</table>
 
Let me know for any thing more....
If your problem solved means kindly Accept my answer
 
Next Recommended Forum