How to add a scrollbar to an HTML5 table?

Question

I have an table in HTML5 that I would like to add a scrollbar to. I want the table to show ten rows and then the user can scroll down to see other songs. How can I add the scrollbar?

Here is my code for the table in HTML5:

<table id="my_table" table border="5">   <tr>     <th>URL</th>   </tr>   <tr>     <td>http://www.youtube.com/embed/evuSpI2Genw</td>   </tr>   <tr>     <td>http://www.youtube.com/embed/evuSpI2Genw</td>   </tr> </table> 

Here is my CSS code:

#my_table {     border-radius: 20px;     background-color: transparent;     color: black;     width: 500px;     text-align: center; } 

Answer 1

If you have heading to your table columns and you don't want to scroll those headings then this solution could help you:

This solution needs thead and tbody tags inside table element.

table.tableSection {     display: table;     width: 100%; } table.tableSection thead, table.tableSection tbody {     float: left;     width: 100%; } table.tableSection tbody {     overflow: auto;     height: 150px; } table.tableSection tr {     width: 100%;     display: table;     text-align: left; } table.tableSection th, table.tableSection td {     width: 33%; } 

Working fiddle

With comments

Note: If you are sure that the vertical scrollbar is always present, then you can use css3 calc property to make the thead cells align with the tbody cells.

table.tableSection thead {     padding-right:18px;   /* 18px is approx. value of width of scroll bar */     width: calc(100% - 18px); } 

You can do the same by detecting presence of scrollbar using javascript and applying the above styles.