What alternative methods, besides iframes, can be used to keep the table header fixed while scrolling in PHP?

When displaying a table with a large number of rows, it is common for the table header to scroll out of view as the user scrolls down the page. To keep the table header fixed while scrolling, one alternative method is to use CSS and JavaScript to achieve this effect without using iframes. By dynamically updating the position of the table header based on the scroll position of the page, we can create a fixed header that stays visible at the top of the table. 

<!DOCTYPE html>
<html>
<head>
  <style>
    table {
      width: 100%;
      border-collapse: collapse;
    }
    th, td {
      padding: 8px;
      border-bottom: 1px solid #ddd;
    }
    th {
      background-color: #f2f2f2;
      position: sticky;
      top: 0;
    }
  </style>
</head>
<body>
  <div style="overflow-x:auto;">
    <table>
      <thead>
        <tr>
          <th>Header 1</th>
          <th>Header 2</th>
          <th>Header 3</th>
        </tr>
      </thead>
      <tbody>
        <?php
          // Generate table rows here
          for ($i = 1; $i <= 100; $i++) {
            echo "<tr>";
            echo "<td>Data 1</td>";
            echo "<td>Data 2</td>";
            echo "<td>Data 3</td>";
            echo "</tr>";
          }
        ?>
      </tbody>
    </table>
  </div>
</body>
</html>

Keywords

scrolling fixed header table PHP alternative methods

Related Questions