提问人：Rejuan hossain 提问时间：11/7/2023 更新时间：11/7/2023 访问量：23
为什么我的HTML表格TD卡宽度突破到400px以下？（适用于移动设备）
why my html table td cards width are breaking below 400px? (For mobile devices)
问：
我的TD表里有几张牌。它的宽度被破坏到 400px 以下。我找不到解决方案。其他大型设备一切正常。但是，低于 400px 时，卡片会破坏其宽度。这是屏幕截图
我的代码 -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cards Table</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row gx-0">
<div class="col-md-6">
<table style="width: 100%;">
<tr>
<td class="table-data">
<a href="https://www.cashifycards.com/rate-calculator" class="card-rate-link">
<div class="card">
<h2 class="card-title-font">Adidas Gift card</h2>
</div>
</a>
</td>
<td class="table-data">
<a href="https://www.cashifycards.com/rate-calculator" class="card-rate-link">
<div class="card">
<h2 class="card-title-font">AirBnb Gift Card</h2>
</div>
</a>
</td>
</tr>
</table>
</div>
<div class="col-md-6">
<table style="width: 100%;">
<tr>
<td class="table-data">
<a href="https://www.cashifycards.com/rate-calculator" class="card-rate-link">
<div class="card">
<h2 class="card-title-font">Amazon Gift card</h2>
</div>
</a>
</td>
<td class="table-data">
<a href="https://www.cashifycards.com/rate-calculator" class="card-rate-link">
<div class="card">
<h2 class="card-title-font">American Express gift card</h2>
</div>
</a>
</td>
</tr>
</table>
</div>
<div class="col-md-6">
<table style="width: 100%;">
<tr>
<td class="table-data">
<a href="https://www.cashifycards.com/rate-calculator" class="card-rate-link">
<div class="card">
<h2 class="card-title-font">Apple gift card</h2>
</div>
</a>
</td>
<td class="table-data">
<a href="https://www.cashifycards.com/rate-calculator" class="card-rate-link">
<div class="card">
<h2 class="card-title-font">Athleta</h2>
</div>
</a>
</td>
</tr>
</table>
</div>
<div class="col-md-6">
<table style="width: 100%;">
<tr>
<td class="table-data">
<a href="https://www.cashifycards.com/rate-calculator" class="card-rate-link">
<div class="card">
<h2 class="card-title-font">Adidas</h2>
</div>
</a>
</td>
<td class="table-data">
<a href="https://www.cashifycards.com/rate-calculator" class="card-rate-link">
<div class="card">
<h2 class="card-title-font">Bed bath and beyond Gift card</h2>
</div>
</a>
</td>
</tr>
</table>
</div>
<div class="col-md-6">
<table style="width: 100%;">
<tr>
<td class="table-data">
<a href="https://www.cashifycards.com/rate-calculator" class="card-rate-link">
<div class="card">
<h2 class="card-title-font">Best buy gift card</h2>
</div>
</a>
</td>
<td class="table-data">
<a href="https://www.cashifycards.com/rate-calculator" class="card-rate-link">
<div class="card">
<h2 class="card-title-font">Banana Republic</h2>
</div>
</a>
</td>
</tr>
</table>
</div>
<div class="col-md-6">
<table style="width: 100%;">
<tr>
<td class="table-data">
<a href="https://www.cashifycards.com/rate-calculator" class="card-rate-link">
<div class="card">
<h2 class="card-title-font">Booking.com gift card</h2>
</div>
</a>
</td>
<td class="table-data">
<a href="https://www.cashifycards.com/rate-calculator" class="card-rate-link">
<div class="card">
<h2 class="card-title-font">Costco cash card</h2>
</div>
</a>
</td>
</tr>
</table>
</div>
<div class="col-md-6">
<table style="width: 100%;">
<tr>
<td class="table-data">
<a href="https://www.cashifycards.com/rate-calculator" class="card-rate-link">
<div class="card">
<h2 class="card-title-font">Cvs gift card</h2>
</div>
</a>
</td>
<td class="table-data">
<a href="https://www.cashifycards.com/rate-calculator" class="card-rate-link">
<div class="card">
<h2 class="card-title-font">Dell gift card</h2>
</div>
</a>
</td>
</tr>
</table>
</div>
<div class="col-md-6">
<table style="width: 100%;">
<tr>
<td class="table-data">
<a href="https://www.cashifycards.com/rate-calculator" class="card-rate-link">
<div class="card">
<h2 class="card-title-font">Disney gift card</h2>
</div>
</a>
</td>
<td class="table-data">
<a href="https://www.cashifycards.com/rate-calculator" class="card-rate-link">
<div class="card">
<h2 class="card-title-font">Door dash gift card</h2>
</div>
</a>
</td>
</tr>
</table>
</div>
<div class="col-md-6">
<table style="width: 100%;">
<tr>
<td class="table-data">
<a href="https://www.cashifycards.com/rate-calculator" class="card-rate-link">
<div class="card">
<h2 class="card-title-font">Ebay Gift card</h2>
</div>
</a>
</td>
<td class="table-data">
<a href="https://www.cashifycards.com/rate-calculator" class="card-rate-link">
<div class="card">
<h2 class="card-title-font">Footlocker sports gift card</h2>
</div>
</a>
</td>
</tr>
</table>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
CSS的 -
`
.col-md-6{填充：0;}。card-rate-link{text-decoration： none;card-title-font{background： linear-gradient（45deg， #fff， #fff， rgb（32， 109， 255）） ！important;-webkit-background-clip： text ！important;颜色： 透明 ！important;font-size： 1.8rem ！important;text-align： center ！important;}。table-data{宽度：190px;最大宽度：100%;容器{最大宽度：820px;
.card {宽度： 100%;最大宽度：190px;高度：214px;背景：#07182E;职位：相对;显示：柔性;place-content：中心;place-items：中心;overflow：隐藏;边框半径：20px;
margin： 0 auto ！important;}
.card h2 {z-index： 1;颜色：白色;font-size： 2em;}
.card：：before {content： '';位置：绝对;宽度：100px;背景图像：线性渐变（180deg， rgb（0， 183， 255）， rgb（255,0,0））;身高：130%;动画：rotBGimg 3s 线性无限;过渡：所有0.2s线性;
@keyframes rotBGimg {from {transform： rotate（0deg）;}
至 {transform： rotate（360deg）;}}
.card：：after {content： '';位置：绝对;背景：#000;;插图：5px;边框半径：15px;
@media屏幕和 （max-width：450px） {.card{height： 195px;填充：5px;card-title-font{font-size： 1.6rem ！important;}}@media屏幕和 （max-width：350px） {.card-title-font{font-size： 1.5rem ！important;}}`
我希望我的所有卡都具有相同的大小，适用于所有移动设备。
答：
1赞
J.Porter
11/7/2023
#1
搭。min-width:150px.card
它会起作用的。
祝你好运。
评论