CODEWITHSUNDEEP
htmlbuttonhtml-table
Shinji-san
Shinji-san

Reputation: 1001

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>

Upvotes: 0

Views: 295

Answers (2)

Marko Mackic
Marko Mackic

Reputation: 2333

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>

Upvotes: 1

Rohit
Rohit

Reputation: 1812

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>

Upvotes: 1

Related Questions