Как сохранить высоту таблиц, содержащихся в родительском div

Я не могу понять, как сохранить высоту таблиц, содержащихся в содержащем div. Моя цель - прокрутить, чтобы увидеть все. Существует множество решений для решения этой проблемы при работе с шириной, но я не смог заставить их работать с высотой.Как сохранить высоту таблиц, содержащихся в родительском 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/

источник

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>

Вы были почти там. Переполнение-y необходимо применить к родительскому контейнеру с установленной на нем высотой, а не самой таблицей. Надеюсь это поможет.

источник

2016-05-22 01:48:26 orangeh0g

.container { overflow-y:scroll; }

источник

2016-05-22 01:44:08 M4tini

Вы должны применить overflow-y:scroll на контейнере

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

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

источник

2016-05-22 01:46:53 Miro

добавить дисплей: блок; в таблице

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

источник

2016-05-22 01:48:45

вы должны смотреть here некоторые хорошие советы о переполнении.
и, возможно, посмотрите на word-wrap и white-space, если вы хотите управлять текстом в y-ax.

источник

2016-05-22 02:03:56 elektronet

Как сохранить высоту таблиц, содержащихся в родительском div

ответ

Смежные вопросы