按钮打破底部边框

Question

你好，因为某些原因我有一个按钮，它打破了我已经为我的桌子设置的底部边框。我最终想为我的所有行做这个，但我想知道如何防止这种情况发生。我桌子上的每一行都应该有一个按钮，但我想保持我的边框完好无损。

＆＃13;

＆＃13;

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;
}

＆＃13;

	<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

问题：每行内的列数不均匀。

解决方案：输入空白<td></td>或使用colspan。

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

因此，您必须将button放入td，因为它位于表格中，但您将border-bottom属性应用于td，因此您的边框位于button下方1}}，如果你想删除它，你可以添加一个类no-border并将其应用到td，在那里你有button所以看看代码，你只会有两列有边框，或者另一个解决方案是在适当的情况下将<td></td>或<th></th>添加到没有<tr>的每个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>