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?
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've noticed a discrepancy between the HTML source code displayed in my browser and the code I receive when using Python's requests.get function. You can see the image depicting this issue at the following link: Any thoughts on why this might be ...
Trying to showcase a collection of videos in a modal using angular.js, I decided to implement the solution from . However, I encountered difficulty in integrating my scope variables into the "html5gallery" class. <div class="html5gallery" data-skin="ho ...
Hello everyone, I'm having a bit of trouble working with Bootstrap. My goal is to create a container with a row that contains three columns of equal width: <div class="row"> <div class="col-md-4" style="background:red;">logo</div& ...
Does anyone have a method for determining the number of unique tags present on a page? For example, counting html, body, div, td as separate tags would result in a total of 4 unique tags. ...
Currently, I am in the process of creating a component and my goal is to achieve a specific layout without the use of JavaScript, preferably utilizing flexbox. Essentially, envision a messenger chat screen with a header and footer containing controls. htt ...
I'm struggling with a JavaScript issue and could use some help. How can I add a new row for all columns with the same properties as the old rows, including a "remove" button for the new row? Is there a way to prevent editing cells that contain b ...
My ng-model has a value assigned to it, but it is not binding with the selected element. <select data-ng-model="myval"> <option value="? number:2 ?"></option> <option value="2" class="ng-binding">Value 1</option> <op ...
Currently working on a personal project focused on web scraping, using beautiful soup to extract data from a website. Encountered an issue where data with the same class but different attributes is present. For instance: <div class="pi--secondary-price ...
I've designed a basic div overlay using the CSS code below: position:absolute; top:0; left:0; display:none; cursor:default; z-index:101; width:100%; height:100%; To show the overlay, jQuery is utilized. Everything works perfectly on desktop browsers ...
While working on a website I'm developing, I encountered an issue with the search function I created. The search function includes a list of categories that users can select or deselect to filter items. This feature is very similar to how Coursera has ...
I am having trouble getting an image from a JSON to display on an Ionic card. Although I can see the JSON response in the console log, the image is not showing up on the card, leaving it blank. It seems like I'm making a mistake in the HTML code. Any ...
How can I randomly select a background picture (out of 4) for my homepage on a personal website using Flask? Despite my attempts to create an HTML template with inline CSS, the selected image does not display as expected. I've already tried using url ...
I'm working on a feature where the user's typed keys are converted to the last single upper-cased character (for example, 'a' becomes 'A', 'abc' becomes 'C'). Here is my current code snippet: <template& ...
Can anyone help me with this issue: Check out this animated GIF The images in my project are overlapping when scrolling! How can I achieve a similar effect for my images? Is there a tutorial or plugin available for this? Here is the current code sn ...
I have been experimenting with various options to change the text color of the `navbar` and specifically the `navbar-brand` item. However, my `.navbar-brand {color: purple;}` CSS class doesn't seem to be working. Can someone please assist me in determ ...
I am currently utilizing Skeleton V2.0.4 to design a landing page, but I seem to be having trouble with my styles not displaying correctly. Below are the specific lines of code related to it: /* Typography –––––––––––––– ...
Initially, this script is found in the document's head section. <script> document.addEventListener("DOMContentLoaded", function () { var e, t = document.querySelectorAll("div.bounceInDown"); for (var n = 0, r = t.length; n & ...
I am faced with the challenge of aligning a 100x100 vertically-centered image to the left of a text block that extends beyond its height. It is important that the text does not wrap underneath the image but stays in a single block on the right side. I must ...
Attached is an image that I would like to design in HTML. It has been quite successful, but when testing it on different resolutions, the red box seems to move around. The design was created with 100% width and height. <style type="text/css"> ...
When encountering the issue of browsers, specifically Internet Explorer in my case, failing to correctly implement complex CSS rules, is there a way to force the evaluation? For example: body[data-some-flag="3"] #someElement .someClass svg stop:first-chi ...