Shinji-san Shinji-san - 5 months ago 12
HTML Question

Button breaking the bottom border

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

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>

Comments