title: CSS - how can I add a vertical scroll in html table
body: <p>I'm working on a JSP web Project. I have a table that can contains data more than my table height can handle. So I want to add a vertical scroll on my table. How can I do this? I've tried other solution I saw in here but sadly it didn't work out good on me. </p>
  
  <p>What I want is the header should stay/still visible even if I scroll it down. I want the data row only to get scrolled down. </p>
  
  <p>below is my JSP code and CSS</p>
  
  <p>JSP: (I only include the part of where my table is concern)</p>
  
  <pre><code>&lt;div id="rightColumn" class="columns"&gt;
                  &lt;table id="timeTable"&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Customer&lt;/th&gt;
                          &lt;th&gt;Balance Time&lt;/th&gt;
                          &lt;th&gt;Date&lt;/th&gt;
                      &lt;/tr&gt;
                      &lt;c:forEach items="${timeProp}" var="_timeProp"&gt;
                          &lt;tr&gt;
                              &lt;td&gt;&lt;c:out value="${_timeProp.tb_customername}"/&gt;&lt;/td&gt;
                              &lt;td&gt;&lt;c:out value="${_timeProp.tb_time}"/&gt;&lt;/td&gt;
                              &lt;td&gt;&lt;c:out value="${_timeProp.tb_date}"/&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/c:forEach&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>CSS: (same goes here)</p>
  
  <pre><code>#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;
  }
  </code></pre>
  
  <p>Thanks in advance. Hope you can help me out here.</p>