body {
      font-family: Arial, sans-serif;
      margin: 20px;
    }

    h2 {
      text-align: center;
    }

    .table-container {
      overflow-x: auto;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      min-width: 800px; /* Allows horizontal scroll on small screens */
    }

    th, td {
      padding: 12px 10px;
      border: 1px solid #ddd;
      text-align: center;
      white-space: nowrap;
    }

    th {
      background-color: #f4f4f4;
    }

    tr:hover {
      background-color: #f1f1f1;
    }

    @media (max-width: 600px) {
      th, td {
        padding: 10px 6px;
        font-size: 14px;
      }
    }