Textteile in Tabellenzelle oben und unten ausrichten

    Um es einfach zu halten: Ich habe eine Tabelle mit zwei Zellen und Rahmen. Der Inhalt, der aus einer Datenbank per php eingelesen wird, besteht aus einem unterschiedlich langen Text und einer - nennen wir es Fußzeile. Denn diese soll immer ganz unten in der Zelle, also direkt über den Rahmen stehen, während der Text nach oben ausgerichtet ist.
    Wenn ich also einen langen und einen kurzen Text habe, ergibt es sich bei dem langen Text automatisch, aber wie kriege ich die Fußzeile des kurzen Textes ganz nach unten? Also gewissermaßen so ein vertical-align:top und bottom in eine Zelle .... Da die Texte variable Längen haben, kann ich also nicht die Text und Fußzeile nicht mit margin auseinanderziehen.

    Hallo,

    du mißbrauchst eine Tabelle für's Layout. Das ist sachlich falsch und sollte deshalb vermieden werden.

    Korrekt benutzt du je nach Inhalt die korrekten Container wie main, article, section u.s.w. und gestaltest die per CSS, zum Beispiel mit Flexbox.

    Um dir konkret helfen zu können wäre etwas Beispiel-Inhalt von dir sinnvoll.

    Gruss

    MrMurphy

    Hallo,
    ich habe ein ähnliches Problem und möchte den Inhalt einer Tabellenzelle (oder besser gesagt den letzten Teil des Inhalts) am unteren Rand der Zelle ausrichten.

    Das hab ich in der Zelle stehen:

    <img src="http://... />

    <p <span class="box-title"> ...<br /> ... </span></p>

    [asa test]B0091EJWWS[/asa]

    <p <span class="box-buttons"> <a class="intern_button" href="http://.../">...</a> <a class="amazon_button" href="..." target="_blank" >Shop</a></span></p>


    Und das in der css:

    .tablepress .column-1,
    .tablepress .column-2,
    .tablepress .column-3,
    .tablepress .column-4 {
    width: 174px;
    height: 280px;
    }

    .tablepress td,
    .tablepress th {
    padding: 0 0;
    }

    .tablepress img {
    margin: 20px 0 10px;
    box-shadow: none;
    }

    /* Zentrieren von Text */
    .tablepress .column-1,
    .tablepress .column-2,
    .tablepress .column-3,
    .tablepress .column-4 {
    text-align: center;
    }

    .tablepress {
    border-collapse: separate;
    border-spacing: 20px;
    background-color: none;
    }

    .tablepress thead th,
    .tablepress tfoot th {
    background-color: #FFFFFF;
    }

    /* Sichtbarer Rahmen um Tabellen herum */
    .tablepress tbody td,
    .tablepress thead th,
    .tablepress tfoot th {
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    }

    .tablepress tbody tr:first-child td {
    border: 1px solid #EDEDED;
    }

    .box-title {
    color: #532D20;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    margin: 0 auto 10px !important;
    }

    .asa_product_box {
    margin: 0 auto 15px;
    }

    .box-buttons {
    text-align: center;
    vertical-align: bottom;
    margin: 0 auto;
    line-height: 0;
    }

    .entry-content p {
    margin: 0 0;
    }


    Das unterste Element sind zwei nebeneinanderliegende Buttons. Diese möchte ich gerne am unteren Zellenrand ausrichten. Sodass sie immer dort kleben bleiben. Kann man das über den css-code lösen?

    Vielen Dank für eure Hilfe!

    2 Mal editiert, zuletzt von Mr.Mo (15. Juli 2015 um 00:02)

    Hallo,

    ja, dass kann über CSS gelöst werden. Ich komme aber mit deinen Quelltextschnipseln nicht zurecht. Stell' mal bitte eine Beispielseite online und poste den Link. Als Freewareprovider kannst du z. B. bplaced.net nehmen.

    Gruss

    MrMurphy

    Hallo Mr. Murphy,

    vielen Dank für deine Antwort. Die Webseite ist bereits online. Schau mal hier.

    Danke!

    PS. Ich will das deswegen machen weil, wenn der Preis über den asa-code nicht zieht rutschen die Buttons nach oben. Alternativ würde ich gerne wenn der Preis nicht eingeblendet werden kann, stattdessen etwas anderes anzeigen lassen. Z.B. -- oder XX oder ...

    Einmal editiert, zuletzt von Mr.Mo (15. Juli 2015 um 00:23)

    Hallo djheke,

    vielen Dank, es hat geklappt. Super!

    Hast Du vielleicht auch noch nen Tipp wie ich die Sache mit dem Preis hinbekomme?

    Gruß

    Mo

    Ich habe für die Tabelle ein Plugin genutzt. Die Tabelle wird erstellt und dann mittels shortcode in die Seite eingefügt. Es besteht jedoch die Möglichkeit zusätzlichen css-code einzugeben, dass ist ja der den ich oben gepostet hab und wo ich deinen Tipp noch mit eingefügt habe. Sollte ich es besser nochmal neu machen und dann ohne das Plugin direkt in die Seite rein? Wäre das Design dann auch responsive?

    Gruß

    Mo