HTML Tabelle dynamische Höhe für eine Zelle

Ist es möglich, einen Tisch zu haben, welches die Höhe der Zelle, wie die folgenden?

______________________________________
|            fixed height            |
|____________________________________|
|                                    |
|                                    |
|           dynamic height           |
|                                    |
|____________________________________|
|            fixed height            |
|____________________________________|

Also die Höhe der ersten und der letzten Zellen sind fixiert und die Mitte der Zelle sollte dynamische und scrollbare.

Derzeit habe ich folgenden code, aber es funktioniert nicht:

<table style="max-height:200px">
    <tr>
        <td height="30px">First element</td>
    </tr>
    <tr>
        <td>
            <!-- Div for scroll functionality if content is too high -->
            <div style="overflow:auto">
                Dynamic content which needs to be scrolled sometimes
            </div>
        </td>
    </tr>
    <tr>
        <td height="30px">last element</td>
    </tr>
</table>

EDIT: es muss nicht eine Tabelle sein, es ist nur wichtig, dass das center-element hat eine dynamische Höhe und ist die durchlaufbaren

EDIT: ich weiß, dass ich kann geben Sie die Höhe des Elements auf dem Bildschirm verschoben werden - dann funktioniert es. Aber ich möchte die Höhe des Elements dynamisch zu sein

  • Zuerst ist da nichts, wie scroll:auto; es ist overflow:auto; zweitens müssen Sie die Höhe für das es denen, wenn festgestellt scrollen Sie nach.
  • Ja, natürlich, mein Fehler 🙂
  • Sorry, ich verstehe nicht... was muss ich angeben, um die Höhe? Ist es nicht genug, wenn ich geben Sie die Höhe des root-Elements (in diesem Fall die Tabelle)?
  • Ich erwähnte Höhe nicht die Breite.
  • Außerdem was meinst du mit dynamisch? Sind Sie versucht zu sagen ist, es wird keine spezifischen height und hängt von Inhalt. Wenn mitten einem haben mehr Inhalt, als es der Höhe zunehmen auto.
InformationsquelleAutor Thomas Sparber | 2015-10-27
  1. 1

    Möchten Sie vielleicht diese:

    1) ich gab height:auto zu Tisch, und hier width:80% Tabelle ist optional.

    2) Die Div innen td gegeben ist height:60px;(nur random, um scroll-bar), zusammen mit overflow:auto;.

    3) Der ersten und zweiten td's haben spezifische height:30px;

    Check this out:

    HTML:

    <table style="height:auto; width:80%;" border=1>
    <tr>
        <td height="30px">First element</td>
    </tr>
    <tr>
        <td>
            <!-- Div for scroll functionality if content is too high -->
            <div style="overflow:auto; height: 60px;">
                Dynamic content which needs to be scrolled sometimes
                Dynamic content which needs to be scrolled sometimes
                Dynamic content which needs to be scrolled sometimes
                Dynamic content which needs to be scrolled sometimes
                Dynamic content which needs to be scrolled sometimes
                Dynamic content which needs to be scrolled sometimes
            </div>
        </td>
    </tr>
    <tr>
        <td height="30px">last element</td>
    </tr>
</table>

    Update : Keine Bestimmte Höhe

    Hier in einem update habe ich verwendet max-height

    HTML:

    <table style="height:auto; width:75%; margin:0px auto;" border=1>
    <tr>
        <td height="30px">First element</td>
    </tr>
    <tr>
        <td>
            <!-- Div for scroll functionality if content is too high -->
            <div style="overflow:auto; max-height:100px;">
                Dynamic content which needs to be scrolled sometimes
                Dynamic content which needs to be scrolled sometimes
                Dynamic content which needs to be scrolled sometimes
                Dynamic content which needs to be scrolled sometimes
                Dynamic content which needs to be scrolled sometimes
                Dynamic content which needs to be scrolled sometimes
                Dynamic content which needs to be scrolled sometimes
                Dynamic content which needs to be scrolled sometimes
            </div>
        </td>
    </tr>
    <tr>
        <td height="30px">last element</td>
    </tr>
</table>

    Hinweis:, Wenn Sie verwenden möchten % für max-height geben height und width gleich 100% zu Ihrem body.

    • Danke für die Antwort, das problem mit diesem ist, dass Sie explizit angegeben ist die Höhe des Elements auf dem Bildschirm verschoben werden. Aber wie bereits erklärt, sollte es dynamisch sein. Ich werde die Frage mehr klar
    • Erste Sache, die VERGISS Breite, nicht wir reden über die Höhe?
    • Sorry... natürlich
    • Zum anderen bin ich der angegebenen Höhe zu bringen scroll-bar, wenn Sie nicht geben Sie die Höhe an jede div, scroll-bar würde nie benötigt. Weil Sie nicht geben Höhe, so div würde automatisch der Höhe so, dass der gesamte Inhalt hineinpasst.
    • OK das verstehe ich... ich dachte, es könnte funktionieren, mit etwas max-height:100%... So die Antwort meiner Frage ist, dass es nicht möglich ist?
    • Überprüfen Sie heraus meine aktualisierte Antwort.
    • Lassen Sie uns weiter, diese Diskussion im chat.

    InformationsquelleAutor divy3993
Schreibe einen Kommentar