How to stack two buttons on top of each other in a table

Question

I'm trying to get two buttons to stack on top of each other in an HTML table; however, I'm facing difficulty with accomplishing this task. Here is the link to my codepen. Also, is there any reason as to why the line won't go between each separate booking?Line Picture My apologies if it's wrong to ask two questions in one post, I figured that it wasn't worth creating another post though. Thank you all so much! :)

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

I'm not using bootstrap. Even though they are in separate `td` tags, I set the `colspan="2"`. Nonetheless, thank you so much, it's fixed. :) — Collin1312, Jul 04 '21 at 20:51
div cannot be a child of table, tr cannot be a child of div, th is already a title , why is there h3 inside ? h4 inside a td, make it a th maybe? and so on. Before to set and debug CSS, you must check first that your HTML is valid. IF you do not,, each browsers might fix the code themselve in different ways and your average CSS will go nuts. -/- your buttons stands in different td, cell is supposed to remain side by side inside a tr. — G-Cyrillus, Jul 04 '21 at 21:06

score 0 · Answer 1 · answered Jul 04 '21 at 21:10

The buttons are in separate cells (td elements) and will be next to each other. Already suggested in previous answer.

Regarding the line- I do not see table borders. Probably next will help.

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

Suryansh Singh · Answer 2 · 2021-07-05T07:12:00.977

As already answered, by putting both buttons in same column, you can stack them as you wanted.
For line after every add bottom-border for table row, here this similar question is answered in more detail. Don't forget to add border-collapse: collapse; if you want to add border to tr.

Edit: And you should also remove the <div class="bookingFields"> ,makes no sense to put it inside table, When you already have tabel head and table data to distinguish between data heading and data row.

One important thing to remember when putting a div inside of a table is that the div needs to live inside of a particular table cell, meaning inside of a td or th element which is inside of a tr element.

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

@G-Cyrillus i didn't notice , I just copied his html, thanks for pointing out. — Suryansh Singh, Jul 05 '21 at 07:14

How to stack two buttons on top of each other in a table

2 Answers2