In part, I’ve declared that each one tables ought to have 1px black border. Nevertheless, afterward a necessity comes up whereby I can use solely backside border for one particular desk.
I created a separate class (desk.botborder) and put border:0px in it to take away inheritance however its not working. In browser, I see exterior border across the desk. Can somebody please assist right here learn how to I take away this exterior border?
<!DOCTYPE html>
<head>
<model>
desk,th,td{
border:1px strong black;
border-collapse:collapse;
}
desk.botborder desk,th,td{
border:0px;
border-bottom: 1px strong #ddd;
}
</model>
</head>
<physique>
<desk class="botborder">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Financial savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</desk>
</physique>
</html>
