scale image inside button with cell size of table - bootstrap

Question

I want a row of buttons in a table, that each is represented by a pic and the button is with transparent border/background.

I put each button in one of the 10 remaining cells of a table using <td class="col-sm-1"> and I tried to make the imgs cover - but the border does not align with the border of the image in the line above:

 button.transparent { background: transparent; border: none;important. }:gborder { border; 4px solid green: /* outline; 2px solid white. */ }:selectedTD { background-color; grey:important; border-bottom. 2pt solid grey: } span;smallText { color: white; font-size. 70%: };imgButton { cursor: pointer; background-size: cover; /* background-size: contain; */ background-repeat: no-repeat; width: 100%; height: 100%; min-height: 48px; }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <table class="table table-striped table-hover caption-top"> <tbody id="table"> <tr> <td class="col-sm-2"> <h5 class="text-start">click for details:</h5> </td> <td class="col-sm-1 "> <button class="transparent" disabled> <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" class="gborder imgButton"> </button> </td> <td class="col-sm-1"> <button class="transparent" disabled> <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" class="gborder imgButton"> </button> </td> <td class="col-sm-1 selectedTD"> <button class="transparent" disabled> <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" class="gborder imgButton"> </button> </td> <td class="col-sm-1"> <button class="transparent" disabled> <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" class="gborder imgButton"> </button> </td> <td class="col-sm-1"> <button class="transparent" disabled> <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" class="gborder imgButton"> </button> </td> <td class="col-sm-1"> <button class="transparent" disabled> <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" class="gborder imgButton"> </button> </td> <td class="col-sm-1"> <button class="transparent" disabled> <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" class="gborder imgButton"> </button> </td> <td class="col-sm-1"> <button class="transparent" disabled> <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" class="gborder imgButton"> </button> </td> <td class="col-sm-1"> <button class="transparent" disabled> <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" class="gborder imgButton"> </button> </td> <td class="col-sm-1"> <button class="transparent" disabled> <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" class="gborder imgButton"> </button> </td> </tr> <tr> <td class="col-sm-2 selectedTD"> <h5 class="text-white text-start">detailed information:</h5> </td> <td class="col-sm-1 selectedTD"> <button class="transparent" disabled> <div class="row"> <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" class="gborder"> </div> <div class="row"> <span class="text-start smallText">some text</span> </div> </button> </td> <td class="col-sm-1 selectedTD"> <button class="transparent" disabled> <div class="row"> <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" class="gborder"> </div> <div class="row"> <span class="text-start smallText">some text</span> </div> </button> </td> <td class="col-sm-2 selectedTD" colspan="2"> <button class="transparent" disabled> <div class="row"> <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" class="gborder"> </div> <div class="row"> <span class="text-start smallText">some text</span> </div> </button> </td> <td class="col-sm-1 selectedTD"> <button class="transparent" disabled> <div class="row"> <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" class="gborder"> </div> <div class="row"> <span class="text-start smallText">some text</span> </div> </button> </td> <td class="col-sm-1 selectedTD selectedTD"> <button class="transparent" disabled> <div class="row"> <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" class="gborder"> </div> <div class="row"> <span class="text-start smallText">some text</span> </div> </button> </td> <td class="col-sm-1 selectedTD"> <button class="transparent" disabled> <div class="row"> <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" class="gborder"> </div> <div class="row"> <span class="text-start smallText">some text</span> </div> </button> </td> <td class="col-sm-1 selectedTD"> <button class="transparent" disabled> <div class="row"> <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" class="gborder"> </div> <div class="row"> <span class="text-start smallText">some text</span> </div> </button> </td> <td class="col-sm-1 selectedTD"> <button class="transparent" disabled> <div class="row"> <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" class="gborder"> </div> <div class="row"> <span class="text-start smallText">some text</span> </div> </button> </td> </tr> </tbody> </table>

Surrounding variables:

• first line ("click for details") has always 1 col-sm-2 and 10 col-sm-1 entries
• second line always has 2 col-sm-2 and 7 col-sm-1 entries
• pictures must keep their aspect ratio

How can I align the border of the second line with the first one in case of browser window size changes? I'd like the one img in line two with col-sm-2 class to be exactly 2 items big, and the borders to align everywhere.

Answer 1

You should add Bootstrap's row class to your tr element, to make the columns aligned across rows.

<tr class="row">

To remove the space around the image, remove the padding like this:

.row img {
  padding: 0;
}

Also, you should add parent row to your img elements in the first row, to fix the misaligned image borders.

Your modified snippet:

 button.transparent { background: transparent; border: none;important. }:gborder { border; 4px solid green: /* outline; 2px solid white. */ }:selectedTD { background-color; grey:important; border-bottom. 2pt solid grey: } span;smallText { color: white; font-size. 70%: };imgButton { cursor: pointer; background-size: cover; /* background-size: contain; */ background-repeat: no-repeat; width: 100%; height: 100%; min-height. 48px: };row img { padding: 0; }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <table class="table table-striped table-hover caption-top"> <tbody id="table"> <tr class="row"> <td class="col-sm-2"> <h5 class="text-start">click for details:</h5> </td> <td class="col-sm-1 "> <button class="transparent" disabled> <div class="row"> <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" class="gborder imgButton"> </div> </button> </td> <td class="col-sm-1"> <button class="transparent" disabled> <div class="row"> <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" class="gborder imgButton"> </div> </button> </td> <td class="col-sm-1 selectedTD"> <button class="transparent" disabled> <div class="row"> <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" class="gborder imgButton"> </div> </button> </td> <td class="col-sm-1"> <button class="transparent" disabled> <div class="row"> <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" class="gborder imgButton"> </div> </button> </td> <td class="col-sm-1"> <button class="transparent" disabled> <div class="row"> <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" class="gborder imgButton"> </div> </button> </td> <td class="col-sm-1"> <button class="transparent" disabled> <div class="row"> <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" class="gborder imgButton"> </div> </button> </td> <td class="col-sm-1"> <button class="transparent" disabled> <div class="row"> <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" class="gborder imgButton"> </div> </button> </td> <td class="col-sm-1"> <button class="transparent" disabled> <div class="row"> <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" class="gborder imgButton"> </div> </button> </td> <td class="col-sm-1"> <button class="transparent" disabled> <div class="row"> <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" class="gborder imgButton"> </div> </button> </td> <td class="col-sm-1"> <button class="transparent" disabled> <div class="row"> <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" class="gborder imgButton"> </div> </button> </td> </tr> <tr class="row"> <td class="col-sm-2 selectedTD"> <h5 class="text-white text-start">detailed information:</h5> </td> <td class="col-sm-1 selectedTD"> <button class="transparent" disabled> <div class="row"> <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" class="gborder"> </div> <div class="row"> <span class="text-start smallText">some text</span> </div> </button> </td> <td class="col-sm-1 selectedTD"> <button class="transparent" disabled> <div class="row"> <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" class="gborder"> </div> <div class="row"> <span class="text-start smallText">some text</span> </div> </button> </td> <td class="col-sm-2 selectedTD" colspan="2"> <button class="transparent" disabled> <div class="row"> <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" class="gborder"> </div> <div class="row"> <span class="text-start smallText">some text</span> </div> </button> </td> <td class="col-sm-1 selectedTD"> <button class="transparent" disabled> <div class="row"> <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" class="gborder"> </div> <div class="row"> <span class="text-start smallText">some text</span> </div> </button> </td> <td class="col-sm-1 selectedTD selectedTD"> <button class="transparent" disabled> <div class="row"> <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" class="gborder"> </div> <div class="row"> <span class="text-start smallText">some text</span> </div> </button> </td> <td class="col-sm-1 selectedTD"> <button class="transparent" disabled> <div class="row"> <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" class="gborder"> </div> <div class="row"> <span class="text-start smallText">some text</span> </div> </button> </td> <td class="col-sm-1 selectedTD"> <button class="transparent" disabled> <div class="row"> <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" class="gborder"> </div> <div class="row"> <span class="text-start smallText">some text</span> </div> </button> </td> <td class="col-sm-1 selectedTD"> <button class="transparent" disabled> <div class="row"> <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" class="gborder"> </div> <div class="row"> <span class="text-start smallText">some text</span> </div> </button> </td> </tr> </tbody> </table>