How can freeze or fix HTML table headers and table body scroll-able

Question

I have created an HTML table and I am trying to freeze or make position fix of <th> tag and table body scroll-able but it is not working out.

Below is HTML code for reference.

<html>

<head>
  <style>
    table {
      width: 100%;
      border: 1px solid black;
      border-collapse: collapse;
    }
    
    table th,
    tr,
    td {
      border: 1px solid black;
    }
  </style>
</head>

<body>
  <table>
    <tr>
      <th>Sr No</th>
      <th>Name</th>
      <th>Addr</th>
    </tr>
    <tr>
      <td>1</td>
      <td>A</td>
      <td>AddrA</td>
    </tr>
    <tr>
      <td>1</td>
      <td>B</td>
      <td>AddrB</td>
    </tr>
    <tr>
      <td>3</td>
      <td>C</td>
      <td>AddrC</td>
    </tr>
    <tr>
      <td>4</td>
      <td>D</td>
      <td>AddrD</td>
    </tr>
    <tr>
      <td>5</td>
      <td>E</td>
      <td>AddrE</td>
    </tr>
    <tr>
      <td>6</td>
      <td>F</td>
      <td>AddrF</td>
    </tr>
  </table>
</body>

</html>

How can I fix table headers position?

Thanks in advance

take a look at https://mottie.github.io/tablesorter/docs/example-widget-sticky-header.html — Shubham Pokhriyal, Feb 23 '18 at 07:35
You can check the answer under this post [here](https://stackoverflow.com/questions/21168521/scrollable-table-with-fixed-header-in-bootstrap) — ahmetsarias, Feb 23 '18 at 07:35

How can freeze or fix HTML table headers and table body scroll-able

0 Answers0