React Js Table Sticky Header - HTML CSS | fixed table header

React Js Table Sticky Header - HTML CSS | fixed table header:A Reactjs table with a sticky header refers to a table component that has a fixed header that remains visible even when the rest of the table is scrolled. This is achieved using HTML and CSS. By applying CSS properties like "position: sticky" and "top: 0" to the table header, it can be fixed at the top of the table container.

Reactjs is used to dynamically render and update the table content, while HTML and CSS handle the styling and behavior of the sticky header. This provides a convenient way to display large datasets in a table while keeping the header visible for easy reference.

written

reviewed

updated

How can I create a table with a sticky header using HTML and CSS?

This HTML and CSS code creates a table with a sticky header. The table is contained within a div with a specified height and overflow property to enable scrolling. The table header is set to stick to the top of the container when scrolling. The table itself has defined styles, including a collapsed border, alternating row colors, and centered content. The first column of each row is bolded.

Table with sticky header - HTML CSS | Fixed table Header

    <div class="container">
      <h3>Table with Sticky header | fixed table header | HTML CSS</h3>
      <div class="table-container">
        <table>
          <thead>
            <tr>
              <th>Header 1</th>
              <th>Header 2</th>
              <th>Header 3</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Row 1, Cell 1</td>
              <td>Row 1, Cell 2</td>
              <td>Row 1, Cell 3</td>
            </tr>
            <tr>
              <td>Row 2, Cell 1</td>
              <td>Row 2, Cell 2</td>
              <td>Row 2, Cell 3</td>
            </tr>
            <tr>
              <td>Row 1, Cell 1</td>
              <td>Row 1, Cell 2</td>
              <td>Row 1, Cell 3</td>
            </tr>
           

            <!-- Add more rows and cells as needed -->
          </tbody>
        </table>
      </div>
    </div>
    <style>
      .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: center; /* Align table headers in the center */
        padding: 0.5em 1em;
        border-bottom: 1px solid #ddd;
      }

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

      td {
        text-align: center; /* Align table cells in the center */
        padding: 0.5em 1em;
        border-bottom: 1px solid #ddd;
      }

      td:first-child {
        font-weight: bold;
      }
    </style>

Run

Output of Table with sticky header - HTML CSS | Fixed table Header

How can I create a Reactjs table with a sticky header or fixed table header?

This code snippet demonstrates the implementation of a sticky table header in a Reactjs application. The table consists of three columns: "Id," "Name," and "Age." The header row remains fixed at the top of the table while scrolling, ensuring it is always visible.

The table content is generated dynamically using an array of data objects. Styling is applied to enhance the visual appearance of the table, including alternating row colors and a container with a maximum height and scrollable overflow.

React Js Table with sticky header | Fixed table Header

  <script type="text/babel">
      const App = () => {
        const data = [
          { id: 1, name: "John Doe", age: 25 },
          { id: 2, name: "Jane Smith", age: 30 },
          // ... add more entries here
        ];

        return (
          <div className="container">
            <h1>React Js Sticky Table Example | fixed table header </h1>
            <div className="table-container">
              <table className="sticky-table">
                <thead>
                  <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Age</th>
                  </tr>
                </thead>
                <tbody>
                  {data.map((row) => (
                    <tr key={row.id}>
                      <td>{row.id}</td>
                      <td>{row.name}</td>
                      <td>{row.age}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        );
      };

      ReactDOM.render(<App />, document.getElementById("app"));
    </script>
 <style>
      .container {
        text-align: center;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12),
          0 2px 4px 0 rgba(0, 0, 0, 0.24);
        width: 600px;
        margin: 0 auto;
        padding: 20px;
      }

      .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>

Run

React JS Tutorial

React Js Table Sticky Header - HTML CSS | fixed table header

How can I create a table with a sticky header using HTML and CSS?

Table with sticky header - HTML CSS | Fixed table Header

Output of Table with sticky header - HTML CSS | Fixed table Header

How can I create a Reactjs table with a sticky header or fixed table header?

React Js Table with sticky header | Fixed table Header

Output of React Js Table with sticky header | Fixed table Header

React JS Tutorial

React Js Table Sticky Header - HTML CSS | fixed table header

Feedback for Abhishek

How can I create a table with a sticky header using HTML and CSS?

Table with sticky header - HTML CSS | Fixed table Header

Output of Table with sticky header - HTML CSS | Fixed table Header

How can I create a Reactjs table with a sticky header or fixed table header?

React Js Table with sticky header | Fixed table Header

Output of React Js Table with sticky header | Fixed table Header