我正在嘗試將表格添加到我的 Shopify 商店，并且當前的表格設定如下：
<div class="table-responsive">
<table style="width:100%; table-layout:fixed; border-collapse:separate !important;background-color: #f7f7f7; border-spacing:30px 5px; color:#333333; font-size:16px; line-height:12px; font-weight:100;" class="bodywrapcenter">
<tr>
<td> <i class="fa-solid fa-droplet"></i> Waterproof</td>
<td> <i class="fa-solid fa-leaf"></i> Certified Vegan</td>
</tr>
<tr>
<td> <i class="fa-solid fa-seedling"></i> Natural Rubber</td>
<td> <i class="fa-solid fa-feather"></i> Light Weight</td>
</tr>
</table></div>但是，我試圖讓下表在移動設備中顯示為一行。（1 x 4 而不是移動設備上的 2 x 2）。
我嘗試為 CSS 添加以下代碼：
.table.bodywrapcenter>tr>td {
width: 100%;
float: left;
}但是，它仍然無法正常作業。
有人可以幫幫我嗎？我是新手，非常感謝詳細的指導。
提前致謝！
uj5u.com熱心網友回復：
也許您可以只使用<div>標簽而不是使用表格元素來做到這一點。如果您可以這樣做，您可以使用display: flex屬性并@mediaqueries根據視口更改視圖。我讓你附上一個例子。
.bodywrapcenter {
width: 100%;
display: flex;
flex-flow: row wrap;
background-color: #f7f7f7;
color: #333333;
font-size: 16px;
line-height: 12px;
font-weight: 100;
}
.bodywrapcenter-tr {
display: flex;
flex-flow: row wrap;
flex: 0 0 50%;
}
.bodywrapcenter-td {
display: block;
}
@media only screen and (min-width: 768px) {
.bodywrapcenter-tr {
flex-flow: row wrap;
justify-content: space-around;
}
}<div class="table-responsive">
<div class="bodywrapcenter">
<div class="bodywrapcenter-tr">
<div class="bodywrapcenter-td">Waterproof</div>
<div class="bodywrapcenter-td">Certified Vegan</div>
</div>
<div class="bodywrapcenter-tr">
<div class="bodywrapcenter-td">Natural Rubber</div>
<div class="bodywrapcenter-td">Light Weight</div>
</div>
</div>
</div>uj5u.com熱心網友回復：
.table-responsive.bodywrapcenter{ display:flex, flex-wrap:wrap }
uj5u.com熱心網友回復：
對于回應式設計，您可以使用以下 CSS 并將您喜歡的樣式設定為不同的寬度。
@media only screen and (max-width: 390px) { //your CSS code }
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/448387.html
下一篇：調整影像大小時如何隱藏邊框？