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 > 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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table >
<tbody id="table">
<tr>
<td >
<h5 >click for details:</h5>
</td>
<td >
<button disabled>
<img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg"
>
</button>
</td>
<td >
<button disabled>
<img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg"
>
</button>
</td>
<td >
<button disabled>
<img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg"
>
</button>
</td>
<td >
<button disabled>
<img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg"
>
</button>
</td>
<td >
<button disabled>
<img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg"
>
</button>
</td>
<td >
<button disabled>
<img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg"
>
</button>
</td>
<td >
<button disabled>
<img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg"
>
</button>
</td>
<td >
<button disabled>
<img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg"
>
</button>
</td>
<td >
<button disabled>
<img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg"
>
</button>
</td>
<td >
<button disabled>
<img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg"
>
</button>
</td>
</tr>
<tr>
<td >
<h5 >detailed information:</h5>
</td>
<td >
<button disabled>
<div >
<img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg"
>
</div>
<div >
<span >some text</span>
</div>
</button>
</td>
<td >
<button disabled>
<div >
<img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg"
>
</div>
<div >
<span >some text</span>
</div>
</button>
</td>
<td colspan="2">
<button disabled>
<div >
<img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg"
>
</div>
<div >
<span >some text</span>
</div>
</button>
</td>
<td >
<button disabled>
<div >
<img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg"
>
</div>
<div >
<span >some text</span>
</div>
</button>
</td>
<td >
<button disabled>
<div >
<img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg"
>
</div>
<div >
<span >some text</span>
</div>
</button>
</td>
<td >
<button disabled>
<div >
<img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg"
>
</div>
<div >
<span >some text</span>
</div>
</button>
</td>
<td >
<button disabled>
<div >
<img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg"
>
</div>
<div >
<span >some text</span>
</div>
</button>
</td>
<td >
<button disabled>
<div >
<img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg"
>
</div>
<div >
<span >some text</span>
</div>
</button>
</td>
</tr>
</tbody>
</table>Surrounding variables:
- first line ("click for details") has always 1
col-sm-2and 10col-sm-1entries - second line always has 2
col-sm-2and 7col-sm-1entries - 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.
CodePudding user response：
You should add Bootstrap's row class to your tr element, to make the columns aligned across rows.
<tr >
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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table >
<tbody id="table">
<tr >
<td >
<h5 >click for details:</h5>
</td>
<td >
<button disabled>
<div >
<img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg"
>
</div>
</button>
</td>
<td >
<button disabled>
<div >
<img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg"
>
</div>
</button>
</td>
<td >
<button disabled>
<div >
<img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg"
>
</div>
</button>
</td>
<td >
<button disabled>
<div >
<img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg"
>
</div>
</button>
</td>
<td >
<button disabled>
<div >
<img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg"
>
</div>
</button>
</td>
<td >
<button disabled>
<div >
<img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg"
>
</div>
</button>
</td>
<td >
<button disabled>
<div >
<img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg"
>
</div>
</button>
</td>
<td >
<button disabled>
<div >
<img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg"
>
</div>
</button>
</td>
<td >
<button disabled>
<div >
<img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg"
>
</div>
</button>
</td>
<td >
<button disabled>
<div >
<img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg"
>
</div>
</button>
</td>
</tr>
<tr >
<td >
<h5 >detailed information:</h5>
</td>
<td >
<button disabled>
<div >
<img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg"
>
</div>
<div >
<span >some text</span>
</div>
</button>
</td>
<td >
<button disabled>
<div >
<img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg"
>
</div>
<div >
<span >some text</span>
</div>
</button>
</td>
<td colspan="2">
<button disabled>
<div >
<img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg"
>
</div>
<div >
<span >some text</span>
</div>
</button>
</td>
<td >
<button disabled>
<div >
<img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg"
>
</div>
<div >
<span >some text</span>
</div>
</button>
</td>
<td >
<button disabled>
<div >
<img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg"
>
</div>
<div >
<span >some text</span>
</div>
</button>
</td>
<td >
<button disabled>
<div >
<img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg"
>
</div>
<div >
<span >some text</span>
</div>
</button>
</td>
<td >
<button disabled>
<div >
<img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg"
>
</div>
<div >
<span >some text</span>
</div>
</button>
</td>
<td >
<button disabled>
<div >
<img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg"
>
</div>
<div >
<span >some text</span>
</div>
</button>
</td>
</tr>
</tbody>
</table>