如何在一张表中将两个按钮堆叠在一起

Question

我正试图让两个按钮在HTML表中堆叠在一起；然而，我在完成这项任务时遇到了困难。这是我的代码笔的链接。此外，有什么理由不在每次单独预订之间排队吗？Line Picture我很抱歉，如果在一篇帖子中问两个问题是错误的，我认为不值得再写一篇帖子。非常感谢大家！：(

HTML:

<div class="currentBookings">
<div class="currentBookingsContainer">
<h3 class="currentBookingsTitle">Current Bookings</h3>
<div class="line"></div>
<table style="width: 340px">
<div class="bookingFields">
<tr>
<th><h3 class="field">Flight Number</h3></th>
<th><h3 class="field">Route</h3></th>
<th><h3 class="field">Aircraft</h3></th>
<th><h3 class="field">Distance</h3></th>
<th colspan="2"><h3 class="field">Options</h3></th>
</tr>
</div>
<div class="actualBookings">
<tr>
<td><h4 class="bookingExample">BA239</h4></td>
<td><h4 class="bookingExample">KLAX-EGLL</h4></td>
<td><h4 class="bookingExample">BA789 (GZ-WAD)</h4></td>
<td><h4 class="bookingExample">4999.9nm</h4></td>
<td><button type="button" class="optionButton" id="remove">Remove Bid</button></td>
<td><button type="button" class="optionButton" id="file">File PIREP</button></td>
</tr>
<tr>
<td><h4 class="bookingExample">BA239</h4></td>
<td><h4 class="bookingExample">KLAX-EGLL</h4></td>
<td><h4 class="bookingExample">BA789 (GZ-WAD)</h4></td>
<td><h4 class="bookingExample">4999.9nm</h4></td>
<td><button type="button" class="optionButton" id="remove">Remove Bid</button></td>
<td><button type="button" class="optionButton" id="file">File PIREP</button></td>
</tr>
<tr>
<td><h4 class="bookingExample">BA239</h4></td>
<td><h4 class="bookingExample">KLAX-EGLL</h4></td>
<td><h4 class="bookingExample">BA789 (GZ-WAD)</h4></td>
<td><h4 class="bookingExample">4999.9nm</h4></td>
<td><button type="button" class="optionButton" id="remove">Remove Bid</button></td>
<td><button type="button" class="optionButton" id="file">File PIREP</button></td>
</tr>
</div>
</table>
</div>
</div>

CSS：

.currentBookings{
text-align: center;
}
.currentBookingsContainer{
width: 340px;
height: 290px;
border: .1px solid rgb(206, 203, 203);
font-weight: bold;
margin-top: 22px;
border-radius: 18px;
text-align: left;
background-color: #ffffff;
box-shadow: 0px 0px 1.5px rgb(46, 46, 46);
display: inline-block;
overflow: hidden;
text-align: center;
}
.currentBookingsTitle{
margin-left: -164px;
margin-top: 11px;
}
.bookingsFields{
text-align: center;
display: flex;
}
.field{
font-size: 14px;
float: left;
margin: 3.5px;
margin-top: -4px;
text-align: center;
}
.actualBookings{
text-align: center;
display: flex;
margin-left: -35px;
}
.bookingExample{
font-size: 12px;
margin: 10px;
margin-top: -5px;
}
.optionButton{
width: 100%;
font-size: 6px;
display: block;
cursor: pointer;
box-shadow: 0px 0px .5px rgb(46, 46, 46);
border: 0;
}
#remove{
color: white;
background-color: #f40c3b;
}
#file{
color: white;
background-color: #003870;
}

Answer 1

按钮位于单独的单元格(td元素(中，并且将挨在一起。已经在前面的回答中提出了。

关于行-我没有看到表格边框。也许下一步会有所帮助。

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

Answer 2

1. 如前所述，通过将两个按钮放在同一列中，您可以根据需要堆叠它们。

2. 对于表行的每个添加底部边框后的行，这里将更详细地回答这个类似的问题。如果您想将边框添加到tr.，请不要忘记添加border-collapse: collapse;

编辑：您还应该删除<div class="bookingFields">，将其放在表内是没有意义的，当您已经有了表头和表数据来区分数据标题和数据行时。

在表中放入div时需要记住的一件重要事情div需要位于特定的表单元格内，意思是在tr元素内部的td或th元素内部。

.currentBookings{
text-align: center;
}
.currentBookingsContainer{
width: 340px;
height: 290px;
border: .1px solid rgb(206, 203, 203);
font-weight: bold;
margin-top: 22px;
border-radius: 18px;
text-align: left;
background-color: #ffffff;
box-shadow: 0px 0px 1.5px rgb(46, 46, 46);
display: inline-block;
overflow: hidden;
text-align: center;
}
.currentBookingsTitle{
margin-left: -164px;
margin-top: 11px;
}
.bookingsFields{
text-align: center;
display: flex;
}
.field{
font-size: 14px;
float: left;
margin: 3.5px;
margin-top: -4px;
text-align: center;
}
.actualBookings{
text-align: center;
display: flex;
margin-left: -35px;
}
.bookingExample{
font-size: 12px;
margin: 10px;
margin-top: -5px;
}
.optionButton{
width: 100%;
font-size: 6px;
display: block;
cursor: pointer;
box-shadow: 0px 0px .5px rgb(46, 46, 46);
border: 0;
}
#remove{
color: white;
background-color: #f40c3b;
}
#file{
color: white;
background-color: #003870;
}
.line{
border-bottom: 1px solid rgb(201, 192, 192);
border-bottom-width: 1.5px;
width: 100%;
align-content: center;
opacity: 50%;
margin-top: 10px;
}
table{
border-collapse:collapse;
}
tr {
padding:5px;
border-bottom: 1px solid rgb(201, 192, 192);
border-bottom-width: 1.5px;
}

hp<div class="currentBookings">
<div class="currentBookingsContainer">
<h3 class="currentBookingsTitle">Current Bookings</h3>
<table style="width: 340px">
<tr>
<th><h3 class="field">Flight Number</h3></th>
<th><h3 class="field">Route</h3></th>
<th><h3 class="field">Aircraft</h3></th>
<th><h3 class="field">Distance</h3></th>
<th colspan="2"><h3 class="field">Options</h3</th>
</tr>

<tr>
<td><h4 class="bookingExample">BA239</h4></td>
<td><h4 class="bookingExample">KLAX-EGLL</h4></td>
<td><h4 class="bookingExample">BA789 (GZ-WAD)</h4></td>
<td><h4 class="bookingExample">4999.9nm</h4></td>
<td><button type="button" class="optionButton" id="remove">Remove Bid</button><button type="button" class="optionButton" id="file">File PIREP</button></td>
</tr>
<tr>
<td><h4 class="bookingExample">BA239</h4></td>
<td><h4 class="bookingExample">KLAX-EGLL</h4></td>
<td><h4 class="bookingExample">BA789 (GZ-WAD)</h4></td>
<td><h4 class="bookingExample">4999.9nm</h4></td>
<td><button type="button" class="optionButton" id="remove">Remove Bid</button><button type="button" class="optionButton" id="file">File PIREP</button></td>
</tr>
<tr>
<td><h4 class="bookingExample">BA239</h4></td>
<td><h4 class="bookingExample">KLAX-EGLL</h4></td>
<td><h4 class="bookingExample">BA789 (GZ-WAD)</h4></td>
<td><h4 class="bookingExample">4999.9nm</h4></td>
<td><button type="button" class="optionButton" id="remove">Remove Bid</button><button type="button" class="optionButton" id="file">File PIREP</button></td>
</tr>
</table>
</div>
</div>