• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Tabelle: Zeilenhöhe nicht fest

C

Capa

Neues Mitglied
Hallo an Alle,

ich habe mittels HTML und CSS eine Tabelle erstellt.

Ausgangssituation: Meine Tabelle enthält drei Spalten. Die mittlere ist befüllt.
Mit dem Zeilenabstand bin ich soweit zufrieden.


Jedoch werden 2 von 3 Spalten erst befüllt wenn mittels onclick ein Button
gedrückt wird. Gleichzeitig klappen die Zeilen auf wie eine Ziehharmonika obwohl ich
das nicht möchte. Die Zeilen sollen die gleich höhe wie vor dem Click haben.

Ich habe leider nichts unternehmen können um dies zu unterbinden.

Wisst ihr was zu tun ist?

Beste Grüße
 
Hallo,

diese Änderung zeigt nur Wirkung, wenn der Wert sehr groß ist. Dann werden die Zeilen nicht auseinander gezogen. Bei kleinen Werten hab ich immer die Ziehharmonika.

Viele Grüße
 
Die Spalte muss halt ohne Wert genauso hoch sein wie ohne Wert damit beim hineinschreiben des Wertes nichts zu sehen ist.
Edit: Ich habe mal ein Beispiel wie Ich mir das gerade vorstelle gemacht: http://codepen.io/LeCub/pen/ZQOYvd , stimmt das so?
 
Zuletzt bearbeitet:
Hey,

vielen Dank für das schöne Testbeispiel. Das hat mich überzeugt, dass es auch anders geht ;-)
Leider konnte ich es nicht auf mein Problem anwenden. Daher versuche ich es auch mit einem
Minimalbeispiel. Leider ist es nicht so sauber vorgetragen wie Deins...

HTML: 
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset = "utf-8" />
    <title> Tabelle</title>
    <style>
    th, td{
        color: DarkCyan;   
    }
    tr{
        height: 10px;
    }
    table{
        position: absolute;
        top: 200px;
        left: 360px;
        width: 400px;
        height: 100px;
        text-align: center;
        background-color: #efefef;
    }
    </style>
   
</head>
<body>
    <h1 id="titel"> Tabelle </h1>
    <table>
        <thead>
            <tr>
                <th scope="col"> Links</th>
                <th>Mitte</th>
                <th scope="col"> Rechts</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><p id="TextLinks"></p></td>
                <td>M 2</td>
                <td><p id="TextRechts"></p></td>
            </tr>
            <tr>
                <td><p id="TextLinks"></p></td>
                <td>M 3</td>
                <td><p id="TextRechts"></p></td>
            </tr>
        </tbody>
   
    </table>

    <script src="https://code.jquery.com/jquery-2.1.0.js"></script>

     <button id="links" onclick="linksKlick()">Links</button>
     <button id="rechts" onclick="rechtsKlick()">Rechts</button>

    <script>
    function linksKlick(){
        $("#TextLinks").text("Text links");
    }
    function rechtsKlick(){
        $("#TextRechts").text("Text rechts");
    }
    </script>
</body>
</html>
Hier kann man den Effekt deutlich erkennen. Noch deutlicher wird es bei mehr Zeilen.

Mir fällt auch auf, dass hier die 3 Zeile nicht "funktioniert". Das wundert mich.

Ich hoffe mein Beispiel schildert mein Problem.

Viele Grüße
 
Hallo

Das wundert mich.
Zum Vergrößern anklicken....

Um es mal direkt zu schreiben: Das war vorhersagbar.

Du willst eine HTML-Seite erstellen und drückst dich darum die Grundlagen zu lernen. Was erwartest du als Ergebnis?

Du mißbrauchst eine Tabelle zum Layouten. Laß es bleiben.

Eine Tabelle ist für Tabellendaten gedacht. Entsprechend verhält sie sich auch, grade bei width- und height-Angaben, anders als andere Elemente. Das musst du bei deinem Problem natürlich berücksichtigen.

Mir fällt auch auf, dass hier die 3 Zeile nicht "funktioniert". Das wundert mich.
Zum Vergrößern anklicken....

Noch so ein Problem Marke "Warum soll ich Grundlagen lernen". IDs dürfen auf einer Webseite nur einmal vorkommen. Wahrscheinlich hast du mangels Wissen das Gefühl, dass ID "besser" sind als Class.

Das ist falsch. ID und Class haben schlicht unterschiedliche Aufgaben. ID sollten entsprechend nur dort verwendet werden, wenn die Bezeichnung wirklich nur einmal auf einer Seite erscheinen darf.

Da nach einer ID keine zweite mit der selben Bezeichnung folgen darf werden weitere mit der selben Bezeichnung nicht weiter berücksichtigt. Das ganz normale Verhalten der Browser, wie es sein soll (aber nicht immer ist).

Ersetze also id durch class und ...

Lass zudem die Finger von position:absolute. Das hat zwar mit deinem aktuellen Problem nichts zu tun, damit hast du dir aber schon die nächste Stolperfalle ins Nest gelegt.

Falls mein Beitrag zu hart erscheint entschuldige ich mich. Ich will dich weder abschrecken noch gar beleidigen. Aber ich will eindeutig und unmißverständlich dein Grundproblem in Bezug auf Webseiten ansprechen, da du dich ansonsten nur von einem Problem zum nächsten hangelst.

Gruss

MrMurphy
 
Zuletzt bearbeitet:
Hallo MrMurphy,

vielen Dank für Deine Antwort. Der Ton überrascht mich.
Wenn Du es nicht aushältst, dass hier Anfänger Fragen stellen und Probleme mit Grundlagen haben,
solltest Du deren Beiträge vielleicht meiden.

Falls hier, entgegen der Ansprache des Forums, Anfänger nichts zu suchen haben, dann werde ich
mir ein anderes Forum für meine Fragen suchen.

Zum Inhalt:
Den Unterschied zwischen class und id habe ich verinnerlicht.
Das ursprüngliche Problem mit dem Ziehharmonika-Effekt konnte ich nicht beheben.

Viele Grüße
 
Da du sowieso mit jQuery arbeitest kannst du das mit den Klassen auch ganz einfach umsetzen, in dem du statt $('#TextLinks') $('.TextLinks') schreibst. Ich habe dein Beispiel mal ein wenig verbessert: http://codepen.io/LeCub/pen/QyEmMp. Jetzt geht es auch mit beliebig vielen Spalten. Der Code ist immer noch bei weitem nicht perfekt, aber es klappt. Beachte aber (wie Mr. Murphy schon gesagt hat), dass Tabellen nur für tabellarische Daten gedacht sind!
 
Hallo,

ich habe in meinem Quellcode schon von id auf class umgestellt.
Jetzt bleibt noch das Problem, dass auch Du in Deinem Beispiel hast.
Weder die Spalten noch Zeilen sind fix.

Beste Grüße
 
Hey,

ich hatte in meinem Beispiel auch eine feste höhe und breite. Dennoch hat sich meine Tabelle nicht daran gehalten. Zudem hatte ich eine feste Position festgelegt.

Viele Grüße
 
Aber das funktioniert scheinbar nur, weil die Zeilen ohnehin sehr hoch sind. Wenn ich jetzt an den "Stellschrauben" drehen um die Zeilenabstand zu verkleinern habe ich wieder den alten Effekt.
 
Capa schrieb:
Wenn ich jetzt an den "Stellschrauben" drehen um die Zeilenabstand zu verkleinern habe ich wieder den alten Effekt.
Zum Vergrößern anklicken....
Dann dreh nicht an ihnen. Du musst zuerst einmal verstehen woran dein Problem liegt (lag): Die leeren Zeilen waren zu klein für den Text der in Sie geschrieben wurde, weshalb sie beim Reinschreiben vergrößert wurden. Jetzt sind Sie auf eine bestimmte Höhe festgesetzt und wenn diese Höhe mindestens so hoch ist wie der Text der in Sie kommt, kann Sie diese Höhe behalten. Anstatt die Zeile höher zu machen, könntest du auch die Schriftgröße verringern; das hätte den selben Effekt
 
Das überzeugt mich noch nicht.
Die Schrift, welche ich hinzufügen möchte, ist nicht größer als die, die schon in der Mitte steht.
Wird nicht durch den Test der mittleren Spalte die Zeilenhöhe festgelegt. Wären die durch drücken
des Knopfes hinzugefügten Teile größer als der vorhandene Text würde mir das einleuchten.
 
Natürlich habe ich Deinen Pen gelesen. Aber er löst noch nicht das Problem.
Hier habe ich jetzt versucht den Unterschied zu verdeutlichen:
HTML: 
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset = "utf-8" />
    <title> Tabelle</title>
    <style>
    th, td{
        color: DarkCyan; 
    }
    tr{
       height: 10%;
    }
    td {
        width: 10%;
        height: 10%;
}
    table{
        position: relative;
        top: 50px;
        left: 360px;
        width: 50%;
        height: 5em;
        text-align: center;
        background-color: #efefef;
    }
    </style>
   
</head>
<body>
    <h1 id="titel1"> Tabelle </h1>
    <table>
        <thead>
            <tr>
                <th scope="col"> Links</th>
                <th>Mitte</th>
                <th scope="col"> Rechts</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><p class="TextLinks"></p></td>
                <td>M 2</td>
                <td><p class="TextRechts"></p></td>
            </tr>
            <tr>
                <td><p class="TextLinks"></p></td>
                <td>M 3</td>
                <td><p class="TextRechts"></p></td>
            </tr>
        </tbody>
    </table>
    <p> </p>
    <table>
        <thead>
            <tr>
                <th scope="col"> Links</th>
                <th>Mitte</th>
                <th scope="col"> Rechts</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Text Links</td>
                <td>M 2</td>
                <td>Text Rechts</td>
            </tr>
            <tr>
                <td>Text Links</td>
                <td>M 3</td>
                <td>Text Rechts</td>
            </tr>
        </tbody>

    </table>
<body>
   
    <script src="https://code.jquery.com/jquery-2.1.0.js"></script>
     <button id="links" onclick="linksKlick()">Links</button>
     <button id="rechts" onclick="rechtsKlick()">Rechts</button>
    <script>
    function linksKlick(){
        $(".TextLinks").text("Text links");
    }
    function rechtsKlick(){
        $(".TextRechts").text("Text rechts");
    }
    </script>
</body>
</html>

Die obere Tabelle soll durch Knopfdruck beschrieben werden. Die untere Tabelle zeigt wie ich mir das Resultat vorstelle.

Der Zustand nach dem Klick: Die obere Tabelle hat einen viel größeren Zeilenabstand als die untere, obwohl die Schrift gleich groß ist.

Viele Grüße
 
Zuletzt bearbeitet:
Vielen Dank. Das löst das Problem tatsächlich.

Ich danke allen für Ihre Hilfe und die zahlreichen Hinweise. Diese haben mir sehr weitergeholfen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben