Maintain visibility of the thead in Semantic UI while scrolling through tbody

I am currently in the process of trying to keep the table header visible while scrolling. Are there any options within semantic ui that can help with this, or am I required to find a non-semantic ui solution?

To view the table correctly, it is recommended to switch to "Full page" mode.

<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.0/semantic.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.0/semantic.css" rel="stylesheet" />

<div style="height:200px;overflow:auto">
  <table class="ui small celled striped table" sytle="width:100%">
    <thead>
      <tr>
        <th>Date</th>
        <th>Status</th>
        <th>Facility Name</th>
        <th>Phone</th>
      </tr>
    </thead>
    <tbody data-bind="foreach:FollowupEntries">
      <tr>
        <td>Date</td>
        <td>Status</td>
        <td>Facility Name</td>
        <td>Phone</td>
      </tr>
      <tr>
        <td>Date</td>
        <td>Status</td>
        <td>Facility Name</td>
        <td>Phone</td>
      </tr>
      <tr>
        <td>Date</td>
        <td>Status</td>
        <td>Facility Name</td>
        <td>Phone</td>
      </tr>
      <tr>
        <td>Date</td>
        <td>Status</td>
        <td>Facility Name</td>
        <td>Phone</td>
      </tr>
      <tr>
        <td>Date</td>
        <td>Status</td>
        <td>Facility Name</td>
        <td>Phone</td>
      </tr>
      <tr>
        <td>Date</td>
        <td>Status</td>
        <td>Facility Name</td>
        <td>Phone</td>
      </tr>
      <tr>
        <td>Date</td>
        <td>Status</td>
        <td>Facility Name</td>
        <td>Phone</td>
      </tr>
      <tr>
        <td>Date</td>
        <td>Status</td>
        <td>Facility Name</td>
        <td>Phone</td>
      </tr>
    </tbody>
  </table>
</div>

htmlcsssemantic-ui

Answer №1

After some troubleshooting, I managed to resolve the issue by utilizing the CSS property position: sticky. Here is the solution that worked for me:

.ui.table thead tr:first-child > th {
     position: sticky !important;
     top: 0;
     z-index: 2;
}

Answer №2

Following @Stewartside's suggestion, it appears that this feature is not currently integrated into Semantic UI, although it has been a topic of discussion.

Answer №3

While it may not be the ideal solution, if you are determined to make it work with some creative tweaks, this method could potentially suit your needs:

<table class="custom-class" style="margin-bottom:0px;border-bottom:none">
   <thead>...</thead>
</table>
<table class="custom-class" style="margin-top:0px; border-top: none">
  <div style="overflow-y:scroll; height: YOUR-REQUIRED-HEIGHT">
    <thead style="visible:hidden">...</thead>
    <tbody>...</tbody>
  </div>
</table>

Answer №4

If you're looking to make your table header sticky, this script is exactly what you need. Simply assign the "sticky" class to your table tag and adjust the offset accordingly:

$(document).ready(function(){
    var headerTop = $('.sticky.table').offset().top;

    $('.sticky.table').children('thead').children('tr').children('th').each( function()  { 
        $(this).css({  width: $(this).outerWidth() }); 
    });

    $(window).scroll(function() {
        var topScroll = $(window).scrollTop(); 

        if($('.sticky.table').length > 0){
            fixTableHeader(topScroll);
        }
    });

    function fixTableHeader(topScroll){
        if(topScroll > headerTop ){
            $('.sticky.table').children('thead').css({'position': 'fixed', top: 0 }); 
        }else{
            $('.sticky.table').children('thead').css({'position': 'relative', top: 0});
        }
    };
});

Answer №5

Implementing Ashkan's method on a table.

table{
  width:100%;
}
table,th,td{
  border: 1px solid grey;
  border-collapse: collapse;
}
thead {
  background-color: grey;
  position: sticky !important;
  top: 0;
  z-index: 2;
}
<div style="overflow: auto; height:100px;">
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>ONE</th>
        <th>TWO</th>
        <th>THREE</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td><td>A</td><td>B</td><td>C</td>
      </tr>
      <tr>
        <td>2</td><td>D</td><td>E</td><td>F</td>
      </tr>
      <tr>
        <td>3</td><td>G</td><td>H</td><td>I</td>
      </tr>
      <tr>
        <td>4</td><td>J</td><td>K</td><td>L</td>
      </tr>
      <tr>
        <td>5</td><td>M</td><td>N</td><td>O</td>
      </tr>
      <tr>
        <td>6</td><td>P</td><td>Q</td><td>R</td>
      </tr>
      <tr>
        <td>7</td><td>S</td><td>T</td><td>U</td>
      </tr>
      <tr>
        <td>8</td><td>V</td><td>W</td><td>X</td>
      </tr>
      <tr>
        <td>9</td><td>Y</td><td>Z</td><td>0</td>
      </tr>
    </tbody>
  </table>
</div>

Answer №6

If you're searching for a solution, take a look at this JSFiddle. It might offer the insight you need. Pay special attention to how the CSS is used with the thead element.

thead { 
position: sticky;
top: 0;
left: 0;
background-color: white;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When a form input is submitted, the webpage will refresh with a new

I have a form embedded on my WordPress page. I want to identify users without referrers so that I can set the referrer for them automatically (the referrer part is handled by a plugin). The registration form URL looks like this: The code provided below w ...

javascriptphphtmlformsappend

Troubleshooting: AngularJS Form Submission Failure

As a novice in Angular and not a JavaScript expert, I am facing challenges with form submission. My task involves loading movie showtimes from an http API and using ng-repeat to display them within a page container. The REST API requires a zipcode input, w ...

javascriptjqueryhtmlangularjsforms

Verify if all the words commence with a certain character using regular expressions

I am working on form validation using Angular, and I am trying to verify if all words in a string start with the letter 'Z'. I am implementing this using a pattern so that I can dynamically change the input's class. So far, this is what I h ...

htmlangularregex

Tips for postponing an action until the webpage is fully loaded

Currently, I am using Selenium in R to perform a specific task. The script I have written enables the program to search for pizza restaurants near a designated geographical coordinate on Google Maps. The script continues to scroll until all restaurant inf ...

pythonhtmlrxmlselenium-webdriver

adjustable text size in web view interface

When loading the following html string in a uiwebview, I am trying to set the font-size as a variable value: NSString * htmlString = [NSString stringWithFormat:@"\ <html>\ <s ...

htmlcssuiwebviewxcode4.3

modify: adjust size of element

Issue with a child element transform: scale(0.544885); transform-origin: center; The child element is not properly centered within its parent container. Visit this link for more information. ...

htmlcss

Styling with CSS: How to Adjust Word Wrap in a Container that Resizes Dynam

I'm struggling to ensure that long lines of text break and wrap correctly within a chat feature I am developing. The crucial elements in question are .chat__messages__item and .chat__messages__body (these are all contained within a parent element set ...

css

What's the best way to showcase a subforum on a customized page within a PHPBB forum?

Is there a way to filter and showcase posts from a specific subforum on a custom page of a phpbb forum? Creating a custom page is not an issue, but I am looking to achieve the following: Imagine I have this hierarchy: category1 forum1 --subforum1 --subfor ...

phpmysqlhtmlphpbb

Sometimes, the @font-face feature decides to take a break and stops functioning out of the blue

I created the webfont kits using Font Squirrel and they are working perfectly. To address an issue with aliasing in Chrome, I reordered the fonts by moving SVG fonts to the top of the order. Usually, everything loads perfectly and looks great. However, th ...

cssfont-face

I prefer to have the div element on its own line without using <br>, as I find it neater that way

I am currently working on a website layout that includes a header with a menu option on the left, a title in the center, and a link to the logIn/signUp page. You can view an image of this layout here: https://ibb.co/z6R1h6w Unfortunately, the login and sig ...

htmlcsstext-align

Fade out a div with jQuery when hovered over, while preventing the links within the div

I've been experimenting with using jQuery to create a fade effect on a div when hovered over. However, I'm encountering an issue where the anchor link within the div cannot be selected once it is shown. $('#show').hover(function() { ...

jquerycss

Display Navigation Bar when Scrolling: Hidden upon Refresh

I'm currently using some jquery to create a fading effect on my Bootstrap 4 navbar when scrolling past a certain point. However, I've encountered a couple of issues. The navbar doesn't appear when reloading the page after already scrolled do ...

javascriptjqueryhtmlcssbootstrap-4

Tips for resolving resizable columns in Bootstrap

Is there a way to prevent the vote button and text from extending beyond the boundaries of the div? Also, how can I specify a width value for the column when it adjusts to fit the content? Here is the code snippet: <div class="container-fluid"> ...

htmlcsstwitter-bootstrap

To view the following set of three images, simply click on the "load more" button

I'm looking to add a load more button to reveal additional images. Currently, the page loads with 3 images visible, and upon clicking the load more button, the next set of 3 images should be displayed on the screen. Unfortunately, the code I've ...

javascriptjqueryhtmlcss

Using Bootstrap to create a fixed footer on a webpage

Is there a substitute for navbar-static-bottom? I currently have my footer set up like this: <div class="navbar navbar-default navbar-fixed-bottom"> <div class="container"> <p class="navbar-text pull-left">&a ...

htmlcsstwitter-bootstrap

Effortlessly switching classes in JavaScript for seamless transitions

I'm currently working on an animation project where I want the title to be visible on the page initially, and then slowly fade away as you scroll down, with a subtitle fading in right after. While I've managed to get the title part working, I&apo ...

javascripthtmlcss

What is the most effective way to assign multiple functions to the onClick event of a button, based on a specific property,

I have a special button that generates a specific type of code when rendered: <button>{this.props.text}</button> This button is named ButtonCustom. In the render method of the main container, I am trying to achieve the following: function my ...

javascripthtmlreactjs

How to Alter the Color of a Hyperlink in HTML

I've been working on an angular2 application and I'm using a hyperlink to trigger a method that opens a small popup window. I've tried different methods to change the color of the link when it's clicked, but so far none have worked. Th ...

htmlcssangular

Display an image from a Google image search when hovering over a specified data attribute

My goal is to add a code snippet that will assign a class of "hoverme" to a table cell. When a user hovers over that cell, an ajax query will be triggered using the data attribute containing information stored there to perform a Google search. Below is a ...

phpjqueryhtmlmysqlajax

What could be causing the lack of response from XMLHttpRequest?

I am attempting to retrieve results from a PHP file that is connected to a database. However, the variable being sent to the database is not being sent from the XMLHttpRequest. Below is the HTML code: <input type="text" id="name"/> Here is the cor ...

javascriptphphtmlajaxxmlhttprequest