Check out my fiddle here: https://jsfiddle.net/oed1k6m7/. It contains two td elements inside the thead.
thead th {
position: -webkit-sticky; /* for Safari */
position: sticky;
top: 0;
}
The code above only makes the first row fixed. How can I make both td's in the thead sticky?
https://i.sstatic.net/NOD30.png
As shown in the image, currently only one row is fixed while the other remains in place.
They are overlapping because they both have a top:0 property set. To fix this, change the value of top for the second line.
div {
max-height: 10em;
overflow: scroll;
}
thead th {
position: -webkit-sticky; /* for Safari */
position: sticky;
top: 0;
}
thead tr:nth-child(2) th {
top: 20px;
}<div>
<table>
<thead>
<tr>
<th></th>
<th>head</th>
<th>head</th>
...
</tr>
<tr>
<th></th>
<th>head</th>
<th>head</th>
...
</tr>
</thead>
<tbody>
<tr>
<td>body</td>
<td>body</td>
<td>body</td>
...
</tr>
<tr>
<td>body</td>
<td>body</td>
<td>body</td>
...
</tr>
...
</tbody>
</table>
</div>Essentially, both instances of th become fixed in position when they reach the top boundary of their container. As the first th is already at the top, the second one sticks beneath it upon reaching the same point.
Could you provide more detail on your intended outcome?
I have a generated svg path code that I want to customize using CSS to remove the default stroke. How can I override the stroke property and set it to none? code: <div class="container" style="position: absolute; left: 3px; z-index: 1;"> <svg he ...
I need a function to trigger every time there is any modification in my textarea, such as characters being typed, deleted, cut, pasted, etc. Currently, I am using: onkeyup || onmousemove = function(); It appears that only onmousemove is being triggered. ...
Having an issue with adding a <p> tag before each jQuery accordion on my MVC page. No matter what I try, the jQuery styling keeps interfering with the classes and styles of my <p> tag. Is there a way to make it look like the other non-jQuery & ...
I am struggling to phrase this question properly and unable to find the solutions I need on Google. When searching, it only provides information on how to add an entire background color to a textbox, which is not what I am looking for. What I aim to achiev ...
Is there a way to change the color of text output by the ECHO function using CSS and conditions? For instance: If I use the ECHO function to display text like this: echo ": The net value of the entire order" echo ": The gross value of the entire order" ...
I am seeking a solution for my webpage which currently loads a random image from an array and centers it using negative margins in CSS. While this method works fine with images of the same size, I am looking to modify the code so that it can handle images ...
Having some trouble with my Javascript and CSS. The script is functioning well, but when I use the filtering function, the CSS stops working and only the filtered results are displayed on the HTML page. Looking for advice on how to fix the Javascript. & ...
Just starting out with angularjs and I'm trying to implement pagination using https://angular-ui.github.io/bootstrap/#/pagination. However, I'm facing an issue where the style class "pagination pagination-lg" is not applying properly. I'm cu ...
(Update1: per suggestion by George Cummins) I need assistance in creating a regex search and replace or a php function to switch positions of characters within a string. (since I couldn't figure it out on my own) For example, if I have the following C ...
I need to modify some HTML that is stored in a variable. For example: var testhtml = $('.agenda-rename').html(); console.log($('input',testhtml).attr('name')); I also tried the following: console.log($(testhtml).find(' ...
I am encountering an issue while trying to figure out why the container__item--special element behaves as a sticky element in this code snippet <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> ...
Timthumb has been working perfectly on my live site, but suddenly stopped working on localhost. The image source is written as follows... Although the image opens when I click and open in a new tab, it does not display on the current page... <img src= ...
If I have code like the example below and want to add the show class to the parent and ancestors. // The last `nav-item` has the `active` class <div class="nested-group nested-item show"> <div class="nested-item show"> <div class="n ...
Even though I provided all the necessary code, including the Flask app, predictionmodel.py, and HTML code, I am still encountering an error when running it locally after clicking submit. The browser (or proxy) sent a request that this server could not un ...
Can anyone recommend any drag-and-drop jQuery plugins that offer similar functionality to Gmail's attachment dragging and dropping feature? I would like the ability to track the upload progress. However, I am specifically looking for options without ...
Currently in the process of constructing a registration form for our website, everything is going smoothly with one minor hiccup. The form consists of two columns where users enter their information. Initially, when designing elements for the first (left) ...
I am currently attempting to limit the maximum height of my component as adding user messages causes it to expand and stretch the whole page. However, I have been unsuccessful in setting a maxHeight property for the component. I am utilizing ScrollToBottom ...
When working on asp.net web forms, I encountered an issue where I was unable to display pagination links as buttons with a gray background on the grid view control. To achieve this, I needed to assign a CSS class to the pager style on the grid view in ord ...
I have a small project that involves displaying different news articles. I need to incorporate the news_all.php file into the table data in dashboard.php without using the include('news.php) function. Instead, I am utilizing Ajax methods to achieve th ...
In a previous inquiry, I sought advice on centering one box within another. However, my attempts this time around have led to some peculiar results. I experimented with two different code variations- one involving a background color and the other utilizing ...