我有一个2x4表，看起来像这样： https://codepen.io/steph2020/pen/EQjyxr
body {
font-family: "Open Sans", sans-serif;
line-height: 1.25;
}
table {
border: 1px solid #ccc;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
table-layout: fixed;
}
table caption {
font-size: 1.5em;
margin: .5em 0 .75em;
}
table tr {
background: #f8f8f8;
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;
}
@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: 3px solid #ddd;
display: block;
margin-bottom: .625em;
}
table td {
border-bottom: 1px solid #ddd;
display: block;
font-size: .8em;
text-align: right;
}
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: left;
font-weight: bold;
}
table td:last-child {
border-bottom: 0;
}
}
#macroom{
color:#A52A2A;
font-size: 20px;
letter-spacing: 1px;
}
#slinky{
color:#000000;
font-size: 20px;
letter-spacing: 1px;
}
.brandImage1{
margin-top:15px;
margin-bottom:15px;
height:60px;
text-align: center;
border-radius: 5px 5px 5px 5px;
overflow: hidden;
border-right-color: #aaa;
box-shadow: 0 2px 18px 0 rgba(0,0,0,0.3);
}
.brandImage2{
height:60px;
width:150px;
text-align: center;
border-radius: 5px 5px 5px 5px;
overflow: hidden;
border-right-color: #aaa;
box-shadow: 0 2px 18px 0 rgba(0,0,0,0.3);
}
.locationIcon{
width:30px;
}
table, th, td {
background-color: #fff;
border-radius: 1px 1px 1px 1px;
overflow: hidden;
border-width: 1px;
border-color: #f4f4f4;
box-shadow: 6px 6px 18px 0 rgba(0,0,0,0.3);
text-align: center;
} <table>
<thead>
<tr>
<th scope="col">
<a href="http://www.petessentials.ie/" target="_blank">
<img class="brandImage1" src="https://www.pawtrails.ie/wp-content/uploads/2018/01/pet-essentials-logo.jpg">
</a>
</th>
<th scope="col">
<a id="macroom" href="https://www.facebook.com/juliespetshop/" target="_blank">
<strong>Macroom Pet Shop</strong>
</a>
</th>
<th scope="col">
<a href="http://www.westcorkpetstore.net/" target="_blank">
<img class="brandImage2" src="https://www.pawtrails.ie/wp-content/uploads/2018/01/potty-fish.jpg">
</a>
</th>
<th scope="col">
<a id="slinky" href="https://www.goldenpages.ie/slinkys-pet-shop-mitchelstown/" target="_blank">
<strong>Slinkys Pet Shop</strong>
</a>
</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Pet Essentials">
<img class="locationIcon" src="http://pawtrails.ie/wp-content/uploads/2018/01/maps-and-flags.png">
<p>Unit 9 Kilnagleary Business Park,</p>
<p>Carrigaline, Co. Cork</p>
</td>
<td data-label="Macroom Pet Shop">
<img class="locationIcon" src="http://pawtrails.ie/wp-content/uploads/2018/01/maps-and-flags.png">
<p>3 Main St Macroom</p>
<p>Co. Cork</p>
</td>
<td data-label="Potty Fish">
<img class="locationIcon" src="http://pawtrails.ie/wp-content/uploads/2018/01/maps-and-flags.png">
<p>Baldwin St, Ballinwillin,</p>
<p>Bandon, Co. Cork</p>
</td>
<td data-label=" Slinkys Pet Shop">
<img class="locationIcon" src="http://pawtrails.ie/wp-content/uploads/2018/01/maps-and-flags.png">
<p>Baldwin St, Ballinwillin,</p>
<p>Mitchelstown, Co. Cork</p>
</td>
</tr>
</tbody>
</table>
我正在使用数据标签来替换小屏幕中的图像。我希望在小屏幕上显示图像而不是文本。现在我在数据标签中使用文本，如何使用数据标签代替图像？
答案 0 :(得分：0)
目前not possible是使用data-label技术以这种动态方式进行的操作。
您可以做的是：使用nth-of-type向每个td索引添加特定样式。奇怪，但应该可以。