title: Add a scroll bar in CSS to my table
body: <p>I'm trying to learn css and javascript. I have these two tables in the link. I'm trying to add a scroll bar so not more than 10 items are shown on the table at a time. Does anyone know how to go about doing that?</p>
  
  <pre><code>body
    font-family: 'Helvetica Neue', Helvetica, Arial
    font-size: 14px
    line-height: 20px
    font-weight: 400
    color: #3b3b3b
    -webkit-font-smoothing: antialiased
    font-smoothing: antialiased
    background: #2b2b2b
  
  .wrapper
    margin: 0 auto
    padding: 40px
    max-width: 800px
  
  .table
    margin: 0 0 40px 0
    width: 100%
    box-shadow: 0 1px 3px rgba(0,0,0,0.2)
    display: table
    @media screen and (max-width: 580px)
      display: block
  
  .row
    display: table-row
    background: #f6f6f6
    &amp;:nth-of-type(odd)
      background: #e9e9e9
    &amp;.header
      font-weight: 900
      color: #ffffff
      background: #ea6153
    &amp;.green
      background: #27ae60
  
    &amp;.blue
      background: #2980b9
    @media screen and (max-width: 580px)
      padding: 8px 0
     display: block
     .cell
       padding: 6px 12px
       display: table-cell
       @media screen and (max-width: 580px)
         padding: 2px 12px
         display: block
  </code></pre>
  
  <p><a href="http://codepen.io/lukepeters/pen/bfFur" rel="nofollow">http://codepen.io/lukepeters/pen/bfFur</a></p>