如何保持包含在父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>

012上应用的

你几乎在那里。溢出-y需要应用于设置了高度的父容器，而不是表本身。希望这可以帮助。

来源

2016-05-22 01:48:26 orangeh0g

.container { overflow-y:scroll; }

来源

2016-05-22 01:44:08 M4tini

您需要的容器

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

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

来源

2016-05-22 01:46:53 Miro

add display：block;表

 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中的表格高度

回答

相关问题