<!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>
