Ergebnis 1 bis 2 von 2

Thema: Tabellen Höhe = maximalle div-Container Höhe

  1. #1
    Youngster
    Registriert seit
    14.03.2017
    Beiträge
    15
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Tabellen Höhe = maximalle div-Container Höhe

    Hallo,

    Habe ein folgendes Layout
    Links Menu feststehend
    Oben Submenu feststehend
    Rechts bzw unterhalb der Menus der Seiteninhalt.
    Das ganze eingeschlossen in einen Div-Container

    Jetzt wird eine Tabelle auf einen Fenster angezeigt
    dieses läuft allerdings in der Höhe über
    die Tabellen Überschriften sind feststehend thead
    und der tbody sollte sich scrollen lassen ohne das sich
    der Rest "Verschwindet".
    tabelle.jpg


    Wenn ich die Höhe der Tabelle mit px angebe dann funktioniert es.
    Die Prozent angabe bleibt leider erfolglos.

    Wo kann ich noch ansetzen?

    mfg Peter

    index.php
    Code:
    <!doctype html> 
    <html lang="de">
        <head>
            <link rel="stylesheet" type="text/css" href="../bibliotheken/css/seitenaufteilung.css">
            <link rel="stylesheet" type="text/css" href="../bibliotheken/css/schalter.css">
            <link rel="stylesheet" type="text/css" href="../bibliotheken/css/tabelle.css">
            <link rel="stylesheet" type="text/css" href="../bibliotheken/css/formular.css">
            <link rel="stylesheet" type="text/css" href="../bibliotheken/css/tooltip.css">
            
            <script src="../bibliotheken/javascript/jquery-3.3.1.min.js"></script>
            <?php
                include ("../bibliotheken/php/datenbank.php");
            ?>
            <title>
                Test Seite
            </title>
        </head>
        <?php
            if ($_GET)
                {
                    $Menu=$_GET['menu'];
                    $Seite=$_GET['seite'];
                }
            else
                {
                    $Menu="";
                    $Seite="";
                }
        ?>
        <div id=fenstergroesse>
             <div id=menu_links>
                <?php
                include("menu_links.php");
                ?>
            </div>
            
            <div id=menu_oben>
                <?php
                    if(file_exists($Menu.".php"))
                        include($Menu.".php");
                    else
                        include ("start/menu_start.php");
                ?>
            </div>
    
            <div id=seiteninhalt>
                <?php
                    if(file_exists($Seite.".php"))
                        include($Seite.".php");
                    else
                        echo "Seite nicht gefunden Admin benachrichtigen";
                        #include("start/start.php");
                ?>
            </div>
        </div>
    </html>
    table.css
    Code:
    /* Allgemeine Tabellen Konfiguration */
    table, th, td
    {
       border: 1px solid black;
      
       }
    table
    {
        height: 60%;
        /*max-height: 600px;*/
        table-layout: fixed;
        overflow: auto;
    
        /*height: auto !important;*/
    }
    td 
    {
       height:22px;
       line-height:22px;
    }
    tr:hover
    {
       background: grey;
    }
    /*    */
    tbody 
    {
        overflow: auto;
        /*max-height: 600px;*/
       background: silver;
    }
    thead,
    tbody,
    tr,
    td,
    th 
    {
       display: block;
    }
    
    tr:after 
    {
       content: "";
       display: block;
       visibility: hidden;
       clear: both;
    }
    tbody td,
    thead > tr > th 
    {
       float: left;
    }
    
    thead > tr > th,
    thead > tr > td 
    {
       font-size:16px;
       border-bottom: 0;
       letter-spacing: 1px;
       vertical-align: top;
       background: #51596a;
       text-transform: uppercase;
       color: #ffffff;
    }
    /*                                                           */
    /* Tabellen Konfiguration Katalog Liste */
    /*                                                           */
    .Tabelle_Katalog
    {
       width: 1600px;
    }    
    .Tabelle_Katalog_Titel_Aktion
    {
        width:85px;
    }
    .Tabelle_Katalog_Titel_Bezeichnung
    {
        width:300px;
    }
    .Tabelle_Katalog_Titel_Artikell
    {
        width:300px;
    }
    .Tabelle_Katalog_Titel_Lieferant
    {
        width:180px;
    }
    .Tabelle_Katalog_Titel_Kostenstelle
    {
        width:200px;
    }
    .Tabelle_Katalog_Spalte_Aktion
    {
        width:85px;
    }
    .Tabelle_Katalog_Spalte_Bezeichnung
    {
        width:300px;
    }
    .Tabelle_Katalog_Spalte_Artikell
    {
        width:300px;
    }
    .Tabelle_Katalog_Spalte_Lieferant
    {
        width:180px;
    }
    .Tabelle_Katalog_Spalte_Kostenstelle
    {
        width:200px;
    }
    seitenaufteilung.css

    Code:
    html, body
    {
        height:     99%;
        width:      99%;
        overflow:   none;
    }
    /* Seitenaufteilung  Administrationsseite */
    /* */
    /* Maximalle Seiten größe */
    #fenstergroesse
    {
        max-height:             99%;
        overflow:           none;
        background-color:   #00A0F0;/* TKMA Farbe */
        border:             5px solid black;
        /* Standard Schrift */
        font-family:        monospace;
        font-size:          16px;
    }
    #menu_links
    {
        width:               190px;
        min-height:          100%;
        height:              100%;
        float:               left;
        padding:             5px;
        text-align:          center;
    }
    #menu_oben
    {
        height:              70px;
        margin-left:         200px;
        padding:             5px;
    }
    #seiteninhalt
    {
        overflow:            auto;
        padding:             5px;
        display:            block;
    }

  2. #2
    Youngster
    Themenstarter

    Registriert seit
    14.03.2017
    Beiträge
    15
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Tabellen Höhe = maximalle div-Container Höhe

    Hallo,

    habe eine Lösung gefunden
    und zwar einen Javascript Code der die Höhe vom tbody Tag prozentuell anpasst

    Code:
    <script>
        var fenster_hoehe=window.innerHeight;
        var tabellen_Hoehe=fenster_hoehe * 0.75;
        $("tbody").css('height',tabellen_Hoehe);
        window.addEventListener("resize", function () {
         var fenster_hoehe=window.innerHeight;
         var tabellen_Hoehe=fenster_hoehe * 0.75;
         $("tbody").css('height',tabellen_Hoehe);
        });
    </script>
    wenn wer eine Schönere Lösung hat Bitte her damit.


    mfg Peter

Ähnliche Themen

  1. div container feste höhe
    Von pauledd im Forum HTML & CSS Forum
    Antworten: 8
    Letzter Beitrag: 27.10.2017, 12:33
  2. Antworten: 2
    Letzter Beitrag: 01.07.2017, 17:27
  3. Tabellen Höhe abgleichen
    Von Th3Dan im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 15.01.2014, 03:22
  4. 2 Tabellen auf eine höhe
    Von !Florian im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 19.08.2010, 23:48
  5. Höhe DIV-Container
    Von Dikra im Forum HTML & CSS Forum
    Antworten: 11
    Letzter Beitrag: 04.01.2008, 13:09

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •