Add a scroll bar in CSS to my table

Question

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?

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
  &:nth-of-type(odd)
    background: #e9e9e9
  &.header
    font-weight: 900
    color: #ffffff
    background: #ea6153
  &.green
    background: #27ae60

  &.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

http://codepen.io/lukepeters/pen/bfFur

May be duplicate of this: http://stackoverflow.com/questions/17584702/how-to-add-a-scrollbar-to-an-html5-table — Mukesh Ram, Jul 19 '16 at 05:57

Vishal Panara · Answer 1 · 2016-07-19T06:08:57.323

0

You can scroll table class, Like below code

.table{
  height:250px;
  overflow-y:scroll;
}

You can set your own height.

edited Jul 19 '16 at 06:08

answered Jul 19 '16 at 05:55

Vishal Panara

746
4
19

I think its a div with class not a separate table tag..? – Nikhil Ghuse Jul 19 '16 at 06:04
Is there a way to make it only show the scroll bar if necessary? – user2111864 Jul 19 '16 at 06:07
I agree @NikhilGhuse – Vishal Panara Jul 19 '16 at 06:09
You want to show scrollbar if height is above 250px, right @user2111864 ? – Vishal Panara Jul 19 '16 at 06:11
thats ok for me now @Vishal – Nikhil Ghuse Jul 19 '16 at 06:12

score 0 · Answer 2 · answered Jul 19 '16 at 06:01

0

You can try like this for each table

       <div class="table" style="height:200px; overflow:scroll;">
      .....................
       <div>

answered Jul 19 '16 at 06:01

Nikhil Ghuse

1,258
14
31

score 0 · Answer 3 · answered Jul 19 '16 at 06:04

To make it clear, You need to set a table-container for each table.

Next is get the height of the table with 10 rows.

Finally, set the height on the table-container with overflow-y: scroll

<style>
.table-container {
  height:300px; / Depends on the height of table with 10 columns
  overflow-y:scroll
}
</style>

<div class="table-container">
  <table>
    ..........
  </table>
</div>

Add a scroll bar in CSS to my table

3 Answers3