vertical align und valign, die nicht am Tisch!

Ich bin dynamisch erzeugen einer Tabelle mit AJAX. Die Struktur der Tabelle aufgefüllt ist wie folgt:

<table id="foobar"  style="width:100%">
    <thead>
        <tr>
            <th style="width:20%;"></th>
            <th style="width:55%;"></th>
            <th title="widget name">Name</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

Die Zelle Daten enthält entweder:

  • ein Bild
  • ein div-wrapper mit Anker-tags und Absätze

Ich habe versucht, die folgenden:

  1. Einstellung valign="top" (getrennt erhältlich) an der table, th und tr Ebenen - es hatte keine Wirkung
  2. Einstellung style="vertical-align: top;" (getrennt erhältlich) an der table, th und tr Ebenen - es hatte keine Wirkung

Möchte ich nicht setzen Sie die Eigenschaft align auf Zell-Ebene, denn es wird dazu führen, zu viel unnötiges aufblasen, wenn die Tabelle enthält mehrere (sagen Hunderte) Zeilen.

Wie kann ich erzwingen, eine Tabelle vertikal ausrichten, seine Zellinhalte nach oben (bedenkt, dass die Zellen enthalten block-Elemente?

  • valign soll arbeiten, egal was. Haben Sie den Allgemeinen CSS-Datei, was Sie definiert für TH Elemente?
  • Koritnik: Sie hatten Recht. meine Haupt-CSS-Datei gesetzt hatten, td { vertical-align: bottom }. Ich fixe es Dank Ihrer Anregung
  • HM ich nehme an, ich sollte es in eine Antwort dann und Sie werden in der Lage sein, es zu akzeptieren. 🙂 Also Tat ich es. Sie finden unten meine Antwort.
InformationsquelleAutor oompahloompah | 2011-04-13
  1. 3

    valign sollte funktionieren, egal was ist, wenn alle Einstellungen, die wir hier sehen, sind diejenigen, die tatsächlich genutzt werden.

    Globale CSS-Einstellungen

    Aber ich vermute einen anderen Amokläufer hier. Haben Sie überprüfen Sie Ihre globalen CSS-Datei, was Sie definiert für TH Elemente? Vielleicht ist das, was gibt Ihnen Kopfschmerzen.

    • Es sollte angemerkt werden, dass valign ist veraltet.
    • verwenden Sie CSS dann. Aber Bedenken Sie, dass Sie möglicherweise einige Globale CSS-Einstellungen (überschreiben valign genauso gut.
    • Vor allem, wenn Sie mit einem pre-fab-Vorlage. Die, die ich arbeitete, hatte ein Stück von css am oberen Rand nur etwa jeden tag, um das ausrichten an der baseline. Ich zog, und alles kam mir in Ort.
    InformationsquelleAutor Robert Koritnik
  2. 14

    Hier ist eine einfache Tabelle-Beispiel mit TH-und TD-tags, in denen der Inhalt ist auf "vertical-align:top".

    Demo: http://jsfiddle.net/HAQ3s/472/

    th, td {
    vertical-align: top;
}
    <table>
    <tr>
        <th>A<br /><br /></th>
        <th>B</th>
        <th>C</th>
    </tr>
    <tr>
        <td>1<br /><br /></td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>
    • Warum nicht entweder table th, table td oder th, td? Ich würde entweder eine Beschränkung in eine Tabelle, oder keine, um innerhalb einer Tabelle. (In Anbetracht dieser speziellen situation würde ich nur nehmen table aus.)
    • Ja, das tun Sie. Also, warum würden Sie verwirren den Leser durch die Verwendung von zwei unterschiedlichen Ansätzen in die gleiche Selektor?
    InformationsquelleAutor wdm
  3. 4

    Beeinflussen Zellen in der Weise, die Sie möchten, Sie tun müssen, legen Sie die Ausrichtung in der Zelle. Da Sie nicht wollen, dies zu tun für jeden einzelnen, müssen Sie denken über das hinzufügen einer css - /style-Abschnitt Ihrer Seite. Hier ist eine Beispiel-definition für das, was Sie brauchen - das ist normalerweise in den head-Bereich oder einer separaten Datei, aber Sie können sogar diese kurz vor dem "< table" - tag.

    <style type="text/css">
td {
  vertical-align: top;
}
</style>
    • Sie sollten, Bearbeiten Sie die css auch ths, das ist, was OP ist das hantieren mit.
    InformationsquelleAutor Roddy
  4. 1
    tr {vertical-align: top;}

    funktioniert bei mir mit deinem Beispiel code, vielleicht brauchen Sie, um zu sehen, wenn eine reset oder so etwas ist ausdrücklich die Einstellung für die vertikale Ausrichtung an der Mitte oder unten auf der tds

    in diesem Fall so etwas wie 

    tr td {vertical-align: top;}

    sollten auch daran arbeiten, um den Selektor spezifischer ist, obwohl in Ihrem konkreten Anwendungsfall müssen Sie möglicherweise mehr, abhängig von, was die Ursache der td überstimmen die tr Einstellung

    InformationsquelleAutor clairesuzy
Schreibe einen Kommentar