CODEWITHSUNDEEP
htmlcss
andrewJ
andrewJ

Reputation: 121

How to make Bootstrap Buttons fit inside of Bootstrap table cell

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.

Upvotes: 1

Views: 3475

Answers (1)

soulshined
soulshined

Reputation: 10612

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>

Upvotes: 1

Related Questions