Ensure the table header in Django tables2 remains fixed at the top of the page as you scroll

Question

Ensure the table header in Django tables2 remains fixed at the top of the page as you scroll

Looking for a way to make tables in Django using django-tables2 stick to the top of the page as you scroll down? Check out some relevant code snippets below:

tables.py

class Example(tables.Table):
    field1 = tables.Column()
    field2 = tables.Column()
    field3 = tables.Column()

    class Meta:
        attrs = {'class': 'table table-striped', 'style': 'display: block; overflow: auto;'}

example.html

<style></style>
<table>
    <thead>
        <tr>
            <td>Field1</td>
            <td>Field2</td>
            <td>Field3</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
        </tr>
    </tbody>
</table>
<script></script>

Struggling with getting the headers to stick after scrolling with CSS and JavaScript? Share your solutions or ask for help - I'm using jquery-3.2.1. Thanks!

javascript jquery html css django

Answer 1

Answer №1

Consider implementing the following code snippet:

window.onscroll = function() {
  myFunction()
};

var navbar = document.getElementsByTagName("table")[0];
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

.sticky {
  position: fixed;
  top: 0;
  width: 180px;
  margin: auto;
  background: white;
}

.sticky+tbody {
  padding-top: 60px;
}

table {
  table-layout: auto;
  width: 180px;
  margin-top: 20px;
}

table,
th,
td {
  border: 1px solid black;
}

table.one {
  margin-bottom: -20px;
}

<table class="one">
  <thead>
    <tr>
      <td>Field1</td>
      <td>Field2</td>
      <td>Field3</td>
    </tr>
  </thead>
  <tbody> </tbody>
</table>
<table class="two">
  <tbody>
    <tr>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
    </tr>
    <!-- Additional table rows and data -->
  </tbody>
</table>

Answer 2

Consider implementing the following code snippet:

window.onscroll = function() {
  myFunction()
};

var navbar = document.getElementsByTagName("table")[0];
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

.sticky {
  position: fixed;
  top: 0;
  width: 180px;
  margin: auto;
  background: white;
}

.sticky+tbody {
  padding-top: 60px;
}

table {
  table-layout: auto;
  width: 180px;
  margin-top: 20px;
}

table,
th,
td {
  border: 1px solid black;
}

table.one {
  margin-bottom: -20px;
}

<table class="one">
  <thead>
    <tr>
      <td>Field1</td>
      <td>Field2</td>
      <td>Field3</td>
    </tr>
  </thead>
  <tbody> </tbody>
</table>
<table class="two">
  <tbody>
    <tr>
      <td>Text</td>
      <td>Text</td>
      <td>Text</td>
    </tr>
    <!-- Additional table rows and data -->
  </tbody>
</table>

Ensure the table header in Django tables2 remains fixed at the top of the page as you scroll

Answer №1

Similar questions

Enhancing ajax content with Rx.Observable.fromEvent: A step-by-step guide

What is the correct way to update an array of objects using setState in React?

Updating a view based on a value entered prior to submitting the form in MVC/C# - a complete guide

Changing the color of a div's text based on its content with CSS

Encountering a problem while trying to run npm publish with public access, error code E

Is the aspx page object linked to a MasterPage object page item?

The HTTP POST function of the controller is failing to trigger when attempting to use the AJAX method

Experiencing difficulties when integrating the pdf-viewer-reactjs module within Next.js framework

Is it possible for React Server Side rendering to be re-rendered on the client side?

A guide to downloading files through your web browser

Troubleshooting the issue: Incompatibility between jQuery .focus() and dynamically generated list items from ng-repeat in AngularJS

The Ajax functionality seems to be malfunctioning when attempting to call a

Make the source transparent to allow the background to shine through

Are routes in Next.js easy for search engines to crawl?

Updating React state manually before using the setState function

tips for showing inlinesvg in internet explorer 8

How can you effectively demonstrate that an HTML element is currently being loaded using AJAX?

Error encountered during EJS compilation

Search for a specific folder and retrieve its file path

I am facing an issue in React Native where components disappear when I update my state. How can I fix this problem?