CSS - htmlテーブルに垂直スクロールを追加するには

Question

私はJSP Webプロジェクトで作業しています。私はテーブルの高さよりも多くのデータを含むことができるテーブルを持っています。だから私はテーブルに垂直スクロールを追加したい。これどうやってするの？私はここで見た他の解決策を試しましたが、悲しいことに私にはうまくいかなかったのです。

私が望むのは、ヘッダーをスクロールしても表示されたままにしておく必要があることです。私は、データ行だけをスクロールダウンしたい。以下

私のJSPコードとCSS

JSPです（私は私のテーブルが懸念されるところの一部を含む）

<div id="rightColumn" class="columns"> 
       <table id="timeTable"> 
        <tr> 
         <th>Customer</th> 
         <th>Balance Time</th> 
         <th>Date</th> 
        </tr> 
        <c:forEach items="${timeProp}" var="_timeProp"> 
         <tr> 
          <td><c:out value="${_timeProp.tb_customername}"/></td> 
          <td><c:out value="${_timeProp.tb_time}"/></td> 
          <td><c:out value="${_timeProp.tb_date}"/></td> 
         </tr> 
        </c:forEach> 
       </table> 
      </div> 

CSS：（同じはここに行く）

#rightColumn { 
    width: 75%; 
    min-height: 388px; 
} 

.columns { 
    border: 1px solid gray; 
    margin: 10px 0px 10px 10px; 
    float:left; 
    padding: 0px; 
    font-size: 20px; 
} 

#timeTable 
{ 
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
    border-collapse: collapse; 
    width: 100%; 
    text-align: left; 
} 

#timeTable th 
{ 
    background-color: #4CAF50; 
    padding: 5px 5px 5px 5px; 
    color: white; 
    padding: 8px; 
} 

#timeTable td, #timeTable th 
{ 
    border: 1px solid black; 
} 

#timeTable tr:nth-child(even) 
{ 
    background-color: #f2f2f2; 
} 

#timeTable tr:hover 
{ 
    background-color: #ddd; 
} 

table tr.active {background: #ccc;} 

#timeTable td 
{ 
    padding: 2px 0px 2px 5px; 
} 

ありがとうございます。あなたが私をここで助けてくれることを願っています。

Answer 1

.columns { 
    border: 1px solid gray; 
    margin: 10px 0px 10px 10px; 
    float:left; 
    padding: 0px; 
    font-size: 20px; 
    overflow: auto; /* add this*/ 
} 

Overflowあなたのdivの内容が適合しない場合は、自動でスクロールバーが表示されます。

そして、あなたはあなたがそれを positionを与える必要がスクロールしたときに、ヘッダーの場所に滞在したい場合：fixed;

Answer 2

overflow-yを設定してみましたか？

EDIT：

が親divのためのあなたのheightとoverflow-yを設定します。