1
喜歡此表的外觀，直到在移動設備上查看。當我向下滾動時，似乎在「網站設計+開發」區域周圍腐敗並惡化。希望對我的代碼有更多的關注，看看是否有簡單的解決方法。我的CSS/HTML表中的移動錯誤？可以使用額外的眼睛。
看到它在行動https://frankidurbinbranding.com/comparison/
下面是代碼：
<style>
table {
border: 1px solid #ccc;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
table-layout: relative;
}
table caption {
font-size: 1.5em;
margin: .5em 0 .75em;
}
table tr {
background: #fff;
border: 1px solid #ddd;
padding: .35em;
}
table th,
table td {
padding: .625em;
text-align: center;
}
table th {
font-size: .85em;
letter-spacing: .1em;
text-transform: uppercase;
background-color: #f8f8f8;
}
@media screen and (max-width: 600px) {
table {
border: 0;
}
table caption {
font-size: 1.3em;
}
table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: 1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
table tr {
border-bottom: 1px solid #ddd;
display: block;
margin-bottom: .625em;
}
table td {
border-bottom: 1px solid #ddd;
display: block;
font-size: .8em;
text-align: left;
}
table td:before {
/*
* aria-label has no advantage, it won't be read inside a table
content: attr(aria-label);
*/
content: attr(data-label);
float: right;
font-weight: 300;
text-transform: uppercase;
}
table td:last-child {
border-bottom: 0;
}
}
table tr:nth-child(2n) {
background-color: #f8f8f8;
}
.alternate tr {
background-color: #fff;
}
</style>
<table>
<thead>
<tr>
<th scope="col"></th>
<th scope="col">BRAND YOU</th>
<th scope="col">DIGITAL GLAMOUR</th>
<th scope="col">VIP STATUS</th>
<th scope="col">ECOMMERCE ELEGANCE</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">Custom Logo Design</td>
<td data-label=「BRAND YOU">★</td>
<td data-label=「DIGITAL GLAMOUR">★</td>
<td data-label=「VIP STATUS">★</td>
<td data-label=「ECOMMERCE ELEGANCE">★</td>
</tr>
<tr>
<td scope="row">Brand Style Guide</td>
<td data-label=「BRAND YOU">★</td>
<td data-label=「DIGITAL GLAMOUR">★</td>
<td data-label=「VIP STATUS">★</td>
<td data-label=「ECOMMERCE ELEGANCE">★</td>
</tr>
<tr>
<td scope="row">Digital Asset Library</td>
<td data-label=「BRAND YOU">★</td>
<td data-label=「DIGITAL GLAMOUR">★</td>
<td data-label=「VIP STATUS">★</td>
<td data-label=「ECOMMERCE ELEGANCE">★</td>
</tr>
<tr>
<td scope="row">Custom Collateral Design</td>
<td data-label=「BRAND YOU">★</td>
<td data-label=「DIGITAL GLAMOUR">★</td>
<td data-label=「VIP STATUS">★</td>
<td data-label=「ECOMMERCE ELEGANCE">★</td>
</tr>
<tr>
<td scope="row">Website Design + Development</td>
<td data-label=「BRAND YOU"></td>
<td data-label=「DIGITAL GLAMOUR">★</td>
<td data-label=「VIP STATUS">★</td>
<td data-label=「ECOMMERCE ELEGANCE">★</td>
</tr>
<tr>
<td scope="row">MailChimp Integration</td>
<td data-label=「BRAND YOU"></td>
<td data-label=「DIGITAL GLAMOUR">★</td>
<td data-label=「VIP STATUS">★</td>
<td data-label=「ECOMMERCE ELEGANCE">★</td>
</tr>
<tr>
<td scope="row">Email Marketing Automation</td>
<td data-label=「BRAND YOU"></td>
<td data-label=「DIGITAL GLAMOUR">★</td>
<td data-label=「VIP STATUS">★</td>
<td data-label=「ECOMMERCE ELEGANCE">★</td>
</tr>
<tr>
<td scope="row">Ecommerce Enabled</td>
<td data-label=「BRAND YOU"></td>
<td data-label=「DIGITAL GLAMOUR">★</td>
<td data-label=「VIP STATUS">★</td>
<td data-label=「ECOMMERCE ELEGANCE">★</td>
</tr>
<tr>
<td scope="row">Stripe Payment Integration</td>
<td data-label=「BRAND YOU"></td>
<td data-label=「DIGITAL GLAMOUR">★</td>
<td data-label=「VIP STATUS">★</td>
<td data-label=「ECOMMERCE ELEGANCE">★</td>
</tr>
<tr>
<td scope="row">Private Membership Portal</td>
<td data-label=「BRAND YOU"></td>
<td data-label=「DIGITAL GLAMOUR"></td>
<td data-label=「VIP STATUS">★</td>
<td data-label=「ECOMMERCE ELEGANCE"></td>
</tr>
<tr>
<td scope="row">Tiered Subscription Plans</td>
<td data-label=「BRAND YOU"></td>
<td data-label=「DIGITAL GLAMOUR"></td>
<td data-label=「VIP STATUS">★</td>
<td data-label=「ECOMMERCE ELEGANCE"></td>
</tr>
<tr>
<td scope="row">Complete Ecommerce Development</td>
<td data-label=「BRAND YOU"></td>
<td data-label=「DIGITAL GLAMOUR"></td>
<td data-label=「VIP STATUS"></td>
<td data-label=「ECOMMERCE ELEGANCE">★</td>
</tr>
<tr>
<td scope="row">Customer Management Panel</td>
<td data-label=「BRAND YOU"></td>
<td data-label=「DIGITAL GLAMOUR"></td>
<td data-label=「VIP STATUS">★</td>
<td data-label=「ECOMMERCE ELEGANCE">★</td>
</tr>
<tr>
<td scope="row">Traffic Analytics Panel</td>
<td data-label=「BRAND YOU"></td>
<td data-label=「DIGITAL GLAMOUR">★</td>
<td data-label=「VIP STATUS">★</td>
<td data-label=「ECOMMERCE ELEGANCE">★</td>
</tr>
<tr>
<td scope="row">Site Management Training</td>
<td data-label=「BRAND YOU"></td>
<td data-label=「DIGITAL GLAMOUR">★</td>
<td data-label=「VIP STATUS">★</td>
<td data-label=「ECOMMERCE ELEGANCE">★</td>
</tr>
<tr>
<td scope="row">SEO Optimization</td>
<td data-label=「BRAND YOU"></td>
<td data-label=「DIGITAL GLAMOUR">★</td>
<td data-label=「VIP STATUS">★</td>
<td data-label=「ECOMMERCE ELEGANCE">★</td>
</tr>
</tbody>
</table>
太謝謝你了！
你搖滾。謝謝！現在試試這個。我很感激！ –
我的榮幸，它幫助你。如果你真的解決了你的問題，那麼請提出我的答案並接受它，讓它讓更多的人遇到同樣的問題。 –
非常接近！這是新的面貌。在移動設備上不太明顯（太寬）。 [link] [https://brandingglamour.com/comparison]也許我應該減少填充？也許它實際上太過於工作了。 –