How can the header of a table be fixed while scrolling using PHP?

To fix the header of a table while scrolling using PHP, you can use a combination of HTML, CSS, and JavaScript. One common approach is to create two separate tables - one for the header and one for the data - and then use CSS to style them accordingly. You can then use JavaScript to synchronize the scrolling of the two tables, ensuring that the header stays fixed at the top of the page. 

<!DOCTYPE html>
<html>
<head>
<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }

  th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
  }

  th {
    position: sticky;
    top: 0;
    background-color: #f1f1f1;
  }

  .data-table {
    height: 300px;
    overflow: auto;
  }
</style>
</head>
<body>

<div class="data-table">
  <table>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <!-- Add more rows here -->
  </table>
</div>

</body>
</html>

Keywords

PHP table header fixed scrolling CSS

Related Questions