Issue
I have a simple html table where I am showing product wise sales and it subtotals. Desired output Sample given below:
html code for the same as below:
<body>
<form>
<label style="font-size:20; font-weight:bold; text-align:center"> Sales </label>
</form>
<table style="border-collapse:collapse;" border="1" cellspacing=0>
<tr bgcolor="#151A7B" style="color:white;">
<th> Product </th>
<th> Units </th>
<th> Sales </th>
</tr>
<tr>
<td> %% Product %% </td>
<td> %% Units %% </td>
<td> %% Sales %% </td>
</tr>
</body>
</html>
I want to highlight the subtotal row. Is it possible to do so using simple html? As I am embedding this report to outlook mail body.
Solution
You can use CSS :nth-child() selector.
.mytable tr:nth-child(3),
.mytable tr:nth-child(5) {
color: white;
background: orange;
}<table class="mytable" style="border-collapse:collapse;" border="1" cellspacing=0>
<tr>
<th> Product </th>
<th> Units </th>
<th> Sales </th>
</tr>
<tr>
<td> %% Product %% </td>
<td> %% Units %% </td>
<td> %% Sales %% </td>
</tr>
<tr>
<td> Subtotal </td>
<td> xxx </td>
<td> xxx </td>
</tr>
<tr>
<td> %% Product %% </td>
<td> %% Units %% </td>
<td> %% Sales %% </td>
</tr>
<tr>
<td> Subtotal </td>
<td> xxx </td>
<td> xxx </td>
</tr>
</table>Or if you want, you can use inline-styling:
<table style="border-collapse:collapse;" border="1" cellspacing=0>
<tr>
<th> Product </th>
<th> Units </th>
<th> Sales </th>
</tr>
<tr>
<td> %% Product %% </td>
<td> %% Units %% </td>
<td> %% Sales %% </td>
</tr>
<tr style="background:orange;color:white;">
<td> Subtotal </td>
<td> xxx </td>
<td> xxx </td>
</tr>
</table>Answered By - George Chond
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.