我想要表格中的一排按鈕,每個按鈕都由圖片表示,并且按鈕具有透明邊框/背景。
我將每個按鈕放在表格的剩余 10 個單元格中的一個中,<td >并嘗試制作 imgs cover- 但邊框與上一行中影像的邊框不對齊:
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 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>
周邊變數:
- 第一行(“點擊查看詳細資訊”)總是有 1 個
col-sm-2和 10col-sm-1個條目 - 第二行總是有 2
col-sm-2和 7col-sm-1個條目 - 圖片必須保持其縱橫比
如果瀏覽器視窗大小發生變化,如何將第二行的邊框與第一行對齊?我希望第二行中的一個 imgcol-sm-2正好是 2 個專案,并且邊框到處對齊。
uj5u.com熱心網友回復:
您應該將 Bootstrap 的row類添加到您的tr元素中,以使列跨行對齊。
<tr class="row">
要洗掉影像周圍的空間,請像這樣洗掉填充:
.row img {
padding: 0;
}
此外,您應該將父級添加row到img第一行的元素中,以修復未對齊的影像邊框。
您修改后的代碼段:
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 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>
轉載請註明出處,本文鏈接:https://www.uj5u.com/qukuanlian/422192.html
標籤:
上一篇:如何訪問和更改具有相同名稱的多個類并回圈訪問它們以在單擊時向它們添加css更改?
下一篇:如何通過懸停<a>來禁用游標縮放
