css - How to add a scrollbar to an HTML5 table? -

i have table in html5 add scrollbar to. want table show ten rows , user can scroll down see other songs. how can add scrollbar?

here code 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 css code:

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

if have heading table columns , don't want scroll headings solution you:

this solution needs thead , 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 sure vertical scrollbar present, can use css3 calc property make thead cells align tbody cells.

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

you can same detecting presence of scrollbar using javascript , applying above styles.