How to un-inherit CSS border property?-CodePudding

In section, I have declared that all tables should have 1px black border. However, later on a need comes up wherein I can use only bottom border for one specific table.

I created a separate class (table.botborder) and put border:0px in it to remove inheritance but its not working. In browser, I see outside border around the table. Can someone please help here how to I remove this outside border?

<!DOCTYPE html>
<head>
<style>
table,th,td{
border:1px solid black;
border-collapse:collapse;
}
table.botborder table,th,td{
border:0px;
border-bottom: 1px solid #ddd;
}
</style>
</head>
<body>
<table >
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  <th>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>
</table>
</body>
</html>

CodePudding user response：

you're not using the CSS selectors correctly due to which the desired styles are not applying

<style>
table,th,td{
border:1px solid black;
border-collapse:collapse;
}

.botborder, .botborder tr, .botborder tr th, .botborder tr td{
  border: 0;
}
.botborder tr td{
  border-bottom: 1px solid #ddd;
}
</style>
</head>
<body>
<table >
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  <th>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>
</table>
</body>

CodePudding user response：

Please check your CSS selectors. This should fix the issue for now:

<style>

   table, th, td{
     border: 1px solid black;
     border-collapse: collapse;
   }

  .botborder, th, td{
     border: none;
     border-bottom: 1px solid #ddd;
   }

</style>