<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
 initial-scale=1.0">
<title>Responsive Table</title>
<style>
/* Ensure table is responsive */
.table-container {
	width: 100%;
	overflow-x: auto; /* Enable horizontal scrolling on small screens */
	-webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

/* Table Styling */
table {
	width: 100%; /* Responsive width */
	max-width: 600px; /* Limit max width */
	border-collapse: collapse;
	font-family: Arial, sans-serif;
	font-size: 14px;
	margin: auto;
}

/* Table Cell Styling */
th,
td {
	border: 1px solid #ddd;
	padding: 8px; /* Adjusted padding */
	text-align: center;
}

th {
	background-color: #4CAF50;
	color: white;
}

tr:nth-child(even) {
	background-color: #f9f9f9;
}

/* Responsive Design for Small Screens */
@media screen and (max-width: 600px) {
	table {
		font-size: 12px; /* Reduce font size */
	}

	th,
	td {
		padding: 6px; /* Adjust padding */
	}
}