Wie behalten Sie eine Tabellenhöhe in einem übergeordneten div

Ich kann nicht herausfinden, wie diese Tabellenhöhe innerhalb der enthaltenen Div enthalten. Mein Ziel ist es, scrollen zu können, um alles zu sehen. Es gibt viele Lösungen, um dies zu lösen, wenn es um die Breite geht, aber ich war nicht in der Lage, sie mit der Höhe arbeiten zu lassen.Wie behalten Sie eine Tabellenhöhe in einem übergeordneten div

<html> 

<head> 
    <style> 
     .container { 
      border: 1px solid black; 
      height: 100px; 
     } 

     td { 
      font-size: 40px; 
     } 

     table { 
      table-layout: fixed; 
      height: 100%; 
      overflow-y: scroll; 
     } 
    </style> 
</head> 

<body> 
    <div class="container"> 
     <table> 
      <thead> 
       <tr> 
        <th> 
         header 
        </th> 
        <th> 
         header 
        </th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td> 
         data 
        </td> 
        <td> 
         data 
        </td> 
       </tr> 
       <tr> 
        <td> 
         data 
        </td> 
        <td> 
         data 
        </td> 
       </tr> 
       <tr> 
        <td> 
         data 
        </td> 
        <td> 
         data 
        </td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</body> 

</html>

https://jsfiddle.net/meeow314159/3vs9bmsf/

Quelle

2016-05-22 C. Greene

 .container { 
 
      border: 1px solid black; 
 
      height: 100px; 
 
      overflow-y: scroll; 
 
     } 
 

 
     td { 
 
      font-size: 40px; 
 
     } 
 

 
     table { 
 
      table-layout: fixed; 
 
      height: 100%; 
 
     }

<div class="container"> 
 
    <table> 
 
    <thead> 
 
     <tr> 
 
     <th> 
 
      header 
 
     </th> 
 
     <th> 
 
      header 
 
     </th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td> 
 
      data 
 
     </td> 
 
     <td> 
 
      data 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      data 
 
     </td> 
 
     <td> 
 
      data 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      data 
 
     </td> 
 
     <td> 
 
      data 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

Sie waren fast da. Der Überlauf-y muss auf den übergeordneten Container mit der festgelegten Höhe angewendet werden, nicht auf die Tabelle selbst. Hoffe das hilft.

Quelle

2016-05-22 01:48:26 orangeh0g

.container { overflow-y:scroll; }

Quelle

2016-05-22 01:44:08 M4tini

Sie müssen die overflow-y:scroll auf den Behälter aufzubringen

https://jsfiddle.net/3vs9bmsf/1/

.container { 
     border: 1px solid black; 
     height: 100px; 
     overflow-y: scroll; 
}*

Quelle

2016-05-22 01:46:53 Miro

Anzeige hinzufügen: Block; zu Tisch

 table { 
     table-layout: fixed; 
      height: 100%; 
     overflow-y: scroll; 
     display:block; 
    }

Quelle

2016-05-22 01:48:45

sollten Sie here für ein paar gute Tipps über Überlauf suchen.
und vielleicht word-wrap und white-space betrachten, wenn Sie den Text in y-ax steuern wollen.

Quelle

2016-05-22 02:03:56 elektronet

Wie behalten Sie eine Tabellenhöhe in einem übergeordneten div

Antwort

Verwandte Themen