<!DOCTYPE html>
<html>
<head>
<style>
div.tablecontainer {
overflow-x: auto;
}
table {
border-collapse: collapse;
width: 100%;
}
table, th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
</style>
</head>
<body>
<h2>Responsive Table</h2>
<p>A responsive table will display a horizontal scroll bar if the screen is too
small to display the full content. Resize the browser window to see the effect:</p>
<p>To create a responsive table, add a container element (like div) with <strong>overflow-x:auto</strong> around the table element:</p>
<div class="tablecontainer">
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>
<th>Points</th>