<div class="table-container">

<table>

<thead>

<tr>

<th>Header 1</th>

<th>Header 2</th>

<th>Header 3</th>

<!-- Add more headers as needed -->

</tr>

</thead>

<tbody>

<tr>

<td>Data 1</td>

<td>Data 2</td>

<td>Data 3</td>

<!-- Add more data cells as needed -->

</tr>
  
 <tr>

<td>Data 1</td>

<td>Data 2</td>

<td>Data 3</td>
   

<!-- Add more data cells as needed -->

</tr>

<!-- Add more rows as needed -->

</tbody>

</table>

</div>
.table-container {

overflow-x: auto; /* Enable horizontal scrolling for the table on small screens */

}table {
width: 100%;
border-collapse: collapse;
}th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
/* Add some additional styling to improve readability */
th {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.