Button breaking the bottom border - html

Question

Hello for some reason I have a button that is breaking the bottom border that I have already set in place for my table. I eventually want to do this for all of my rows, but I would like to know how to prevent that from happening. Each row in my table should have a button, but I'd like to keep my borders intact.
table{
color: #26004d;
width: 70%;
margin-left: auto;
margin-right: auto;
border-collapse: collapse;
font-size: 30px;
}
th, td{
padding: 30px 50px 30px 50px;
border-bottom: 1px solid #862d59;
}
th{
color: black;
}
tr:hover{
background-color: lightgreen;
}
.button{
background-color: #26004d;
color: white;
font-size: 20px;
border:none;
padding: 10px 18px;
text-align: center;
text-decoration: none;
display: table-cell;
}
<div id="inner">
<table>
<thead>
<tr>
<th>Pet</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cat</td>
<td>$10</td>
<td><button class="button">Buy Now</button></td>
</tr>
<tr>
<td>Lion</td>
<td>$40</td>
</tr>
<tr>
<td>Flamingo</td>
<td>$50</td>
</tr>
<tr>
<td>Panda</td>
<td>$1000</td>
</tr>
</tbody>
</table>
</div>

Answer 1

So, you must put button into td, because it's in table, but you're applying the border-bottom property to td so you have border under button, if you want to remove it you can add a class no-border and apply it to td in which you have your button so look at code, and you'll have only two columns have border, or another solution is to add <td></td> or <th></th> where appropriate into every <tr>that has no button.
table{
color: #26004d;
width: 70%;
margin-left: auto;
margin-right: auto;
border-collapse: collapse;
font-size: 30px;
}
th, td{
padding: 30px 50px 30px 50px;
border-bottom: 1px solid #862d59;
}
.no-border{
border:none;
}
th{
color: black;
}
tr:hover{
background-color: lightgreen;
}
.button{
background-color: #26004d;
color: white;
font-size: 20px;
border:none;
padding: 10px 18px;
text-align: center;
text-decoration: none;
display: table-cell;
}
<div id="inner">
<table>
<thead>
<tr>
<th>Pet</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cat</td>
<td>$10</td>
<td class="no-border"><button class="button">Buy Now</button></td>
</tr>
<tr>
<td>Lion</td>
<td>$40</td>
</tr>
<tr>
<td>Flamingo</td>
<td>$50</td>
</tr>
<tr>
<td>Panda</td>
<td>$1000</td>
</tr>
</tbody>
</table>
</div>

Answer 2

Problem: Uneven number of column inside each row.
Solution: Either enter blank <td></td> or use colspan.
table{
color: #26004d;
width: 70%;
margin-left: auto;
margin-right: auto;
border-collapse: collapse;
font-size: 30px;
}
th, td{
padding: 30px 50px 30px 50px;
border-bottom: 1px solid #862d59;
}
th{
color: black;
}
tr:hover{
background-color: lightgreen;
}
.button{
background-color: #26004d;
color: white;
font-size: 20px;
border:none;
padding: 10px 18px;
text-align: center;
text-decoration: none;
display: table-cell;
}
<div id="inner">
<table>
<thead>
<tr>
<th>Pet</th>
<th>Price</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Cat</td>
<td>$10</td>
<td><button class="button">Buy Now</button></td>
</tr>
<tr>
<td>Lion</td>
<td colspan="2">$40</td>
</tr>
<tr>
<td>Flamingo</td>
<td>$50</td>
</tr>
<tr>
<td>Panda</td>
<td>$1000</td>
</tr>
</tbody>
</table>
</div>