Vue Table Sticky header

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <h3>Vue Js Table Sticky Header | Fixed Header Table</h3>
    <div class="table-container">
      <table>
        <thead>
          <tr>
            <th v-for="header in headers" :key="header">{{ header }}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(row, index) in rows" :key="index">
            <td v-for="cell in row" :key="cell">{{ cell }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <script type="module">
    const app = new Vue({
      el: "#app",
      data() {
        return {
          headers: ['Name', 'Age', 'Email'],
          rows: [
            ['John', 30, 'john@example.com'],
            ['Jane', 25, 'jane@example.com'],
            ['Bob', 40, 'bob@example.com'],
            ['Sara', 35, 'sara@example.com'],
            ['John Smith', 28, 'john@example.com'],
            ['Sarah Johnson', 38, 'sarah@example.com'],
            ['Michael Brown', 23, 'brown@example.com'],
            ['Emily Davis', 33, 'davis@example.com'],
            ['John', 30, 'john@example.com'],
            ['Jane', 25, 'jane@example.com'],
            ['Bob', 40, 'bob@example.com'],
            ['Sara', 35, 'sara@example.com'],
            ['John Smith', 28, 'john@example.com'],
            ['Sarah Johnson', 38, 'sarah@example.com'],
            ['Michael Brown', 23, 'brown@example.com'],
            ['Emily Davis', 33, 'davis@example.com'],
          ],
        };
      },
    });
  </script>
  <style scoped>
    .table-container {
      max-width: 1200px;
      margin: 0 auto;
      position: relative;
      height: 400px;
      overflow: auto;
    }

/* Style table */
    table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 1em;
    }

thead {
      position: sticky;
      top: 0;
      background-color: #fff;
      z-index: 1;
    }

thead th {
      background-color: #f5f5f5;
      text-align: left;
      padding: 0.5em 1em;
      border-bottom: 1px solid #ddd;
    }

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

td {
      padding: 0.5em 1em;
      border-bottom: 1px solid #ddd;
    }

td:first-child {
      font-weight: bold;
    }

</style>
</body>

</html>