Ausrichten von in Tabellenzelle

  • Hallo!

    Folgendes Problem:

    Ich möchte, dass die Bilder die gesamte Zelle ausfüllen. Bilder sind 350px breit und hoch. Folgendes HTML habe ich dazu:

    <p><span id="react-root"><span>“We love what we do” Family run, high-end multi brand retail stores in Austria</span></span>.</p>
    <p> </p>
    <p> </p>
    <table width="100%">
    <tbody>
    <tr style="height: 217.75px;">
    <td style="width: 20%; height: 217.75px; padding: 0px; border: 5px solid #c7ac7f;"><img src="//http://cdn.shopify.com/s/files/1/0913…pg?v=1537345831" alt="" /></td>
    <td style="width: 20%; height: 217.75px; padding: 0px; border: 5px solid #c7ac7f;"><img src="//http://cdn.shopify.com/s/files/1/0913…pg?v=1537345853" alt="" /></td>
    <td style="width: 20%; height: 217.75px; padding: 0px; border: 5px solid #c7ac7f;"><img src="//http://cdn.shopify.com/s/files/1/0913…pg?v=1537345890" alt="" /></td>
    <td style="width: 20%; height: 217.75px; padding: 0px; border: 5px solid #c7ac7f;"><img src="//http://cdn.shopify.com/s/files/1/0913…pg?v=1537345941" alt="" /></td>
    </tr>
    <tr style="height: 50px;">
    <td style="height: 50px; border: 5px solid #c7ac7f;">
    <h1 style="text-align: center;">Salzburg</h1>
    <p style="text-align: center;"> </p>
    <p style="text-align: center;"><span style="color: #f6b26b;"><a href="https://www.dantendorfer.at/pages/salzburg" style="color: #b9a686;">More Information</a></span></p>
    </td>
    <td style="height: 50px; text-align: center; border: 5px solid #c7ac7f;">
    <h1>Wien</h1>
    <p> </p>
    <p><span style="color: #f6b26b;"><a href="https://www.dantendorfer.at/pages/wien" style="color: #b9a686;">More Information</a></span></p>
    </td>
    <td style="height: 50px; text-align: center; border: 5px solid #c7ac7f;">
    <h1>Linz</h1>
    <p> </p>
    <p><span style="color: #f6b26b;"><a href="https://www.dantendorfer.at/pages/linz" style="color: #b9a686;">More Information</a></span></p>
    </td>
    <td style="height: 50px; text-align: center; border: 5px solid #c7ac7f;">
    <h1>Innsbruck</h1>
    <p> </p>
    <p><span style="color: #f6b26b;"><a href="https://www.dantendorfer.at/pages/innsbruck" style="color: #b9a686;">More Information</a></span></p>
    </td>
    </tr>
    </tbody>
    </table>
    

    Wo liegt mein Fehler?

    Ich habe es bereits bei einer anderen Webseite gemacht, da hat es in der Desktop Ansicht gepasst. Hier gelingt es mir einfach nicht.

    Ebenso habe ich das Problem bei http://www.dantendorfer-gentlemen.at unter stores, dass es in der normalen Ansicht passt (zur mobilen habe ich bereits eine anderes Thema eröffnet) aber auf dem Tablet ist die Darstellung der Tabelle richtig, nur die Bilder sind auch nicht ganz ausgefüllt in der Zelle.


    Need Help!!!!
    Bye
    Vreni

  • Was ist dein Problem? .. der kleine Spalt zwischen dem Bild und der unteren Border?

    Dann setze mal in deinem CSS für die Bilder 'img' das 'vertical-align: bottom;'

    Per Default ist dieser auf 'baseline' gesetzt... aber 'baseline' ist eben nicht unten und das führt zu ein paar Pixeln Abstand zum 'bottom' des Elements.

    if(!sleep)

    {$sheep++;}