Hallo!
Ich habe folgendes Problem.
Habe eine Tabelle, die in der normalen Ansicht super dargestellt wird.
In der mobilen Ansicht auf dem Handy:
Es geht hier um die Webseite http://www.dantendorfer-gentlemen.at
http://www.dantendorfer-gentlemen.atund hier um die Seite Stores.
Ich habe folgendes HTML:
<p> </p>
<table width="100%">
<tbody>
<tr>
<td style="height: 270px; padding: 0;"><img src="//http://cdn.shopify.com/s/files/1/0020…pg?v=1537277263" alt="" /></td>
<td style="height: 270px; padding: 0;"><img src="//http://cdn.shopify.com/s/files/1/0020…pg?v=1537277280" alt="" /></td>
<td style="height: 270px; padding: 0;"><img src="//http://cdn.shopify.com/s/files/1/0020…pg?v=1537277712" alt="" /></td>
<td style="height: 270px; padding: 0;"><img src="//http://cdn.shopify.com/s/files/1/0020…pg?v=1537277741" alt="" /></td>
</tr>
<tr style="height: 10px;">
<td style="height: 50px;">
<h4> Dantendorfer Salzburg</h4>
<p>Getreidegasse 33<br />5020 Salzburg</p>
<p> </p>
</td>
<td style="height: 50px;">
<h4>Dantendorfer Wien</h4>
<p>Weihburggasse 9<br />1010 Wien</p>
</td>
<td style="height: 50px;">
<h4>Dantendorfer Linz</h4>
<p>Promenade 5<br />4020 Linz</p>
</td>
<td style="height: 50px;">
<h4>Dantendorfer Innsbruck</h4>
<p>Kiebachgasse 15<br />6020 Innsbruck</p>
</td>
</tr>
<tr style="height: 10px;">
<td style="height: 30px;"><a href="https://dantendorfer-gentlemen.at/pages/salzburg">More Information</a></td>
<td style="height: 30px;"><a href="https://dantendorfer-gentlemen.at/pages/wien">More Information</a></td>
<td style="height: 30px;"><a href="https://dantendorfer-gentlemen.at/pages/linz">More Information</a></td>
<td style="height: 30px;"><a href="https://dantendorfer-gentlemen.at/pages/salzburg">More Information</a></td>
</tr>
</tbody>
</table>
<p> </p>
Habe gelesen, dass ich mit "data-label" da was machen kann. Weiß nur nicht wo ich das dann einfügen soll. Direkt nach <td geht es nicht.
Ansonten habe ich im css folgendes:
table.mobile-layout {
border-bottom: none;
.column-title {
font-weight: 700;
width: auto;
padding-right: 23px;
display: block;
}
thead {
display: none;
}
tr td {
width: 100%;
display: block;
text-align: center;
border-top: 1px solid $primary-border-color !important;
border-bottom: none;
border-left: none;
border-right: none;
/* < IE 10 fix */
float:left;
clear:left;
&:first-child {
border-top: none!important;
}
&:last-child {
border-bottom: 1px solid $primary-border-color !important;
}
}
tr:nth-child(even) td {
background: $select-background-color;
}
}
Hoffe mir kann jemand helfen!
Lg
Vreni