<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Simple responsive table - demo 2</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type="text/css"> table { margin: 0; border-collapse: collapse; } td, th { padding: .5em 1em; border: 1px solid #999; } .table-container { width: 100%; overflow-y: auto; _overflow: auto; margin: 0 0 1em; } .table-container::-webkit-scrollbar { -webkit-appearance: none; width: 14px; height: 14px; } .table-container::-webkit-scrollbar-thumb { border-radius: 8px; border: 3px solid #fff; background-color: rgba(0, 0, 0, .3); } </style> </head> <body> <div class="container"> <div class="table-container"> <table> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> <th>Header 4</th> <th>Header 5</th> <th>Header 6</th> <th>Header 7</th> <th>Header 8</th> </tr> <tr> <td>row1_cell1</td> <td>row1_cell2</td> <td>row1_cell3</td> <td>row1_cell4</td> <td>row1_cell5</td> <td>row1_cell6</td> <td>row1_cell7</td> <td>row1_cell8</td> </tr> <tr> <td>row2_cell1</td> <td>row2_cell2</td> <td>row2_cell3</td> <td>row2_cell4</td> <td>row2_cell5</td> <td>row2_cell6</td> <td>row2_cell7</td> <td>row2_cell8</td> </tr> <tr> <td>row3_cell1</td> <td>row3_cell2</td> <td>row3_cell3</td> <td>row3_cell4</td> <td>row3_cell5</td> <td>row3_cell6</td> <td>row3_cell7</td> <td>row3_cell8</td> </tr> <tr> <td>row4_cell1</td> <td>row4_cell2</td> <td>row4_cell3</td> <td>row4_cell4</td> <td>row4_cell5</td> <td>row4_cell6</td> <td>row4_cell7</td> <td>row4_cell8</td> </tr> <tr> <td>row5_cell1</td> <td>row5_cell2</td> <td>row5_cell3</td> <td>row5_cell4</td> <td>row5_cell5</td> <td>row5_cell6</td> <td>row5_cell7</td> <td>row5_cell8</td> </tr> </table> </div> </div> </body> </html>