How to make Bootstrap Buttons fit inside of Bootstrap table cell - html

Question

I am not able to get my button to fully cover the bootstrap table cell.
I tried other posts on how to make buttons fit inside table cells but none on them seem to work with the bootstrap ones.
<tbody>
<tr>
<td>Airport / Railway Station Drops and Pick-Ups</td>
<td>Arunachaleeshwarar Temple, Adi Thiruvarangam Temple</td>
<td>
<div class="dropdown">
<button style="height: 122px; width:159px;" class="btn btn-
secondary dropdown-toggle" type="button" id="dropdownMenu2" data-
toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Beaches
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another
action</button>
<button class="dropdown-item" type="button">Something else
here</button>
</div>
</div>
</td>
I tried to increase the size of the button to fit the cell, but this only increases the size of the cell and not how much of the cell the button covers. I ideally want it to completely cover the cell.

Answer 1

The issue is you have inline styling overriding the buttons properties.
style="height: 122px; width:159px;" is explicitly setting your deminsions for the button, therefor not allowing it to change once it's set. If you want it to fill the entire td you can remove that markup and replace it with a class, just for example, setting the width to 100%.
#dropdownMenu2 {
width: 100%;
height: 100%;
}
<tbody>
<tr>
<td>Airport / Railway Station Drops and Pick-Ups</td>
<td>Arunachaleeshwarar Temple, Adi Thiruvarangam Temple</td>
<td>
<div class="dropdown">
<button class="btn btn-
secondary dropdown-toggle" type="button" id="dropdownMenu2" data- toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Beaches
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another
action</button>
<button class="dropdown-item" type="button">Something else
here</button>
</div>
</div>
</td>
</tr>
</tbody>