Responsive Tabelle

  • 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="//cdn.shopify.com/s/files/1/0020/2008/1719/files/2018_09_Dantendorfer_Salzburg_Social_Media_Content_Silke_Lapina_265-3_Kopie_Kopie_large.jpg?v=1537277263" alt="" /></td>
    <td style="height: 270px; padding: 0;"><img src="//cdn.shopify.com/s/files/1/0020/2008/1719/files/2018_08_30_JOB_Dantendorfer_Social_Media_Fotos_Wien_Fotos_von_Silke_Lapina_0206-1_Kopie_Kopie_large.jpg?v=1537277280" alt="" /></td>
    <td style="height: 270px; padding: 0;"><img src="//cdn.shopify.com/s/files/1/0020/2008/1719/files/2_16_Kopie_Kopie_large.jpg?v=1537277712" alt="" /></td>
    <td style="height: 270px; padding: 0;"><img src="//cdn.shopify.com/s/files/1/0020/2008/1719/files/Bild_01_large.jpg?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