Tbody nicht auf ganzer Seite angezeigt, wenn Höhe in "%"

Hallo Ich erstelle eine Kopfzeile festen Tisch. Ich möchte eine Tabelle machen, in der tbody mit Bildschirmgröße erweitert wird, also möchte ich Höhe in Prozent % geben, aber es funktioniert nicht richtig. Aber wenn ich Pixel gebe, funktioniert es. Hier ist der Link Jsfiddle. Wo ich versuche, tbody Höhe in % zu geben.Tbody nicht auf ganzer Seite angezeigt, wenn Höhe in "%"

 table { 
 
      width: 100%; 
 
      height:100%; 
 
     } 
 

 
     thead, tbody, tr, td, th { display: block; } 
 

 
     tr:after { 
 
      content: ' '; 
 
      display: block; 
 
      visibility: hidden; 
 
      clear: both; 
 
     } 
 

 
     thead th { 
 
      height: 30px; 
 

 
      /*text-align: left;*/ 
 
     } 
 

 
     tbody { 
 
      height: 125px; 
 
      overflow-y: auto; 
 
     } 
 

 
     thead { 
 
      /* fallback */ 
 
     } 
 

 

 
     tbody td, thead th { 
 
      width: 19.2%; 
 
      float: left;

<table class="table table-striped"> 
 
    <thead> 
 
    <tr> 
 
     <th>Make</th> 
 
     <th>Model</th> 
 
     <th>Color</th> 
 
     <th>Year</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td class="filterable-cell">Ford</td> 
 
     <td class="filterable-cell">Escort</td> 
 
     <td class="filterable-cell">Blue</td> 
 
     <td class="filterable-cell">2000</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="filterable-cell">Ford</td> 
 
     <td class="filterable-cell">Escort</td> 
 
     <td class="filterable-cell">Blue</td> 
 
     <td class="filterable-cell">2000</td> 
 
    </tr> 
 
      <tr> 
 
     <td class="filterable-cell">Ford</td> 
 
     <td class="filterable-cell">Escort</td> 
 
     <td class="filterable-cell">Blue</td> 
 
     <td class="filterable-cell">2000</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="filterable-cell">Ford</td> 
 
     <td class="filterable-cell">Escort</td> 
 
     <td class="filterable-cell">Blue</td> 
 
     <td class="filterable-cell">2000</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="filterable-cell">Ford</td> 
 
     <td class="filterable-cell">Escort</td> 
 
     <td class="filterable-cell">Blue</td> 
 
     <td class="filterable-cell">2000</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="filterable-cell">Ford</td> 
 
     <td class="filterable-cell">Escort</td> 
 
     <td class="filterable-cell">Blue</td> 
 
     <td class="filterable-cell">2000</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="filterable-cell">Ford</td> 
 
     <td class="filterable-cell">Escort</td> 
 
     <td class="filterable-cell">Blue</td> 
 
     <td class="filterable-cell">2000</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="filterable-cell">Ford</td> 
 
     <td class="filterable-cell">Escort</td> 
 
     <td class="filterable-cell">Blue</td> 
 
     <td class="filterable-cell">2000</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="filterable-cell">Ford</td> 
 
     <td class="filterable-cell">Escort</td> 
 
     <td class="filterable-cell">Blue</td> 
 
     <td class="filterable-cell">2000</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="filterable-cell">Ford</td> 
 
     <td class="filterable-cell">Escort</td> 
 
     <td class="filterable-cell">Blue</td> 
 
     <td class="filterable-cell">2000</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="filterable-cell">Ford</td> 
 
     <td class="filterable-cell">Escort</td> 
 
     <td class="filterable-cell">Blue</td> 
 
     <td class="filterable-cell">2000</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="filterable-cell">Ford</td> 
 
     <td class="filterable-cell">Escort</td> 
 
     <td class="filterable-cell">Blue</td> 
 
     <td class="filterable-cell">2000</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="filterable-cell">Ford</td> 
 
     <td class="filterable-cell">Escort</td> 
 
     <td class="filterable-cell">Blue</td> 
 
     <td class="filterable-cell">2000</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="filterable-cell">Ford</td> 
 
     <td class="filterable-cell">Escort</td> 
 
     <td class="filterable-cell">Blue</td> 
 
     <td class="filterable-cell">2000</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="filterable-cell">Ford</td> 
 
     <td class="filterable-cell">Escort</td> 
 
     <td class="filterable-cell">Blue</td> 
 
     <td class="filterable-cell">2000</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="filterable-cell">Ford</td> 
 
     <td class="filterable-cell">Escort</td> 
 
     <td class="filterable-cell">Blue</td> 
 
     <td class="filterable-cell">2000</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="filterable-cell">Ford</td> 
 
     <td class="filterable-cell">Escort</td> 
 
     <td class="filterable-cell">Blue</td> 
 
     <td class="filterable-cell">2000</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="filterable-cell">Ford</td> 
 
     <td class="filterable-cell">Escort</td> 
 
     <td class="filterable-cell">Blue</td> 
 
     <td class="filterable-cell">2000</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="filterable-cell">Ford</td> 
 
     <td class="filterable-cell">Escort</td> 
 
     <td class="filterable-cell">Blue</td> 
 
     <td class="filterable-cell">2000</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="filterable-cell">Ford</td> 
 
     <td class="filterable-cell">Escort</td> 
 
     <td class="filterable-cell">Blue</td> 
 
     <td class="filterable-cell">2000</td> 
 
    </tr> 
 
    
 
    </tbody> 
 
    
 
</table>

Quelle

2017-06-16 ephemeral

Sie verwenden 'tbody {height: 125px; overflow-y: auto;} 'so nimmt die Tabelle nicht die volle Höhe ein. – LKG

@LokeshGupta ja ich sagte, wenn ich Höhe ersetze: 125px; mit 100% Höhe zeigt nichts. – ephemeral

Verwenden Sie 'Höhe: 100vh;' in Tabelle Ich denke, es wird funktionieren – LKG

aktualisieren css Teil

tbody { 
    height: 100vh; /*add this */ 
    overflow-y: auto; 
}

Arbeiten Geige

fiddle link

thead, 
 
tbody, 
 
tr, 
 
td, 
 
th { 
 
    display: block; 
 
} 
 

 
tr:after { 
 
    content: ' '; 
 
    display: block; 
 
    visibility: hidden; 
 
    clear: both; 
 
} 
 

 
thead th { 
 
    height: 30px; 
 
    /*text-align: left;*/ 
 
} 
 

 
tbody { 
 
    height: 100vh; 
 
    overflow-y: auto; 
 
} 
 

 
thead { 
 
    /* fallback */ 
 
} 
 

 
tbody td, 
 
thead th { 
 
    width: 19.2%; 
 
    float: left; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css"> 
 
<table class="table table-striped"> 
 
    <thead> 
 
    <tr> 
 
     <th>Make</th> 
 
     <th>Model</th> 
 
     <th>Color</th> 
 
     <th>Year</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td class="filterable-cell">Ford</td> 
 
     <td class="filterable-cell">Escort</td> 
 
     <td class="filterable-cell">Blue</td> 
 
     <td class="filterable-cell">2000</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="filterable-cell">Ford</td> 
 
     <td class="filterable-cell">Escort</td> 
 
     <td class="filterable-cell">Blue</td> 
 
     <td class="filterable-cell">2000</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="filterable-cell">Ford</td> 
 
     <td class="filterable-cell">Escort</td> 
 
     <td class="filterable-cell">Blue</td> 
 
     <td class="filterable-cell">2000</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="filterable-cell">Ford</td> 
 
     <td class="filterable-cell">Escort</td> 
 
     <td class="filterable-cell">Blue</td> 
 
     <td class="filterable-cell">2000</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="filterable-cell">Ford</td> 
 
     <td class="filterable-cell">Escort</td> 
 
     <td class="filterable-cell">Blue</td> 
 
     <td class="filterable-cell">2000</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="filterable-cell">Ford</td> 
 
     <td class="filterable-cell">Escort</td> 
 
     <td class="filterable-cell">Blue</td> 
 
     <td class="filterable-cell">2000</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="filterable-cell">Ford</td> 
 
     <td class="filterable-cell">Escort</td> 
 
     <td class="filterable-cell">Blue</td> 
 
     <td class="filterable-cell">2000</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="filterable-cell">Ford</td> 
 
     <td class="filterable-cell">Escort</td> 
 
     <td class="filterable-cell">Blue</td> 
 
     <td class="filterable-cell">2000</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="filterable-cell">Ford</td> 
 
     <td class="filterable-cell">Escort</td> 
 
     <td class="filterable-cell">Blue</td> 
 
     <td class="filterable-cell">2000</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="filterable-cell">Ford</td> 
 
     <td class="filterable-cell">Escort</td> 
 
     <td class="filterable-cell">Blue</td> 
 
     <td class="filterable-cell">2000</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="filterable-cell">Ford</td> 
 
     <td class="filterable-cell">Escort</td> 
 
     <td class="filterable-cell">Blue</td> 
 
     <td class="filterable-cell">2000</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="filterable-cell">Ford</td> 
 
     <td class="filterable-cell">Escort</td> 
 
     <td class="filterable-cell">Blue</td> 
 
     <td class="filterable-cell">2000</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="filterable-cell">Ford</td> 
 
     <td class="filterable-cell">Escort</td> 
 
     <td class="filterable-cell">Blue</td> 
 
     <td class="filterable-cell">2000</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="filterable-cell">Ford</td> 
 
     <td class="filterable-cell">Escort</td> 
 
     <td class="filterable-cell">Blue</td> 
 
     <td class="filterable-cell">2000</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="filterable-cell">Ford</td> 
 
     <td class="filterable-cell">Escort</td> 
 
     <td class="filterable-cell">Blue</td> 
 
     <td class="filterable-cell">2000</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="filterable-cell">Ford</td> 
 
     <td class="filterable-cell">Escort</td> 
 
     <td class="filterable-cell">Blue</td> 
 
     <td class="filterable-cell">2000</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="filterable-cell">Ford</td> 
 
     <td class="filterable-cell">Escort</td> 
 
     <td class="filterable-cell">Blue</td> 
 
     <td class="filterable-cell">2000</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="filterable-cell">Ford</td> 
 
     <td class="filterable-cell">Escort</td> 
 
     <td class="filterable-cell">Blue</td> 
 
     <td class="filterable-cell">2000</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="filterable-cell">Ford</td> 
 
     <td class="filterable-cell">Escort</td> 
 
     <td class="filterable-cell">Blue</td> 
 
     <td class="filterable-cell">2000</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="filterable-cell">Ford</td> 
 
     <td class="filterable-cell">Escort</td> 
 
     <td class="filterable-cell">Blue</td> 
 
     <td class="filterable-cell">2000</td> 
 
    </tr> 
 

 
    </tbody> 
 

 
</table>

Quelle

2017-06-16 14:10:54 LKG

Nach Gebrauch dieses Tischkopfes bleiben Sie nicht fixiert. Ich möchte einen Tischkopf reparieren. – ephemeral

Überprüfen Sie die Bearbeitung Antwort hoffe, es wird Ihnen helfen! – LKG

danke @Lokesh Gupta. Genau das habe ich gesucht. Danke. Und upvote Frage wenn möglich. – ephemeral

Sie nicht tbody als 100% Höhe verwenden können, weil es „nichts“ und leer sein wird, müssen Sie 100% Höhe hinzuzufügen selbst zum Inhalt, die td ist. Wenn Sie wollen, dass tbody repariert wird, können Sie das Beispiel machen: 125px Höhe sind 125 verwendbare Pixel und der gesamte Inhalt wird in 125px scrollbar sein. Ändern Sie tbody und fügen Sie tbody tr td wie folgt hinzu.

tbody { 
     overflow-y: auto; 
    }

und fügen

tbody tr td { 
     height: 100%; 
     overflow-y: auto; 
    }

Quelle

2017-06-16 12:51:27

Nach Verwendung dieses Tabellenkopfes bleiben Sie nicht fixiert. Ich möchte einen Tischkopf reparieren. – ephemeral

Tbody nicht auf ganzer Seite angezeigt, wenn Höhe in "%"

Antwort

Verwandte Themen