Achieving successful functionality with position:relative in IE9

Having difficulty with the position: relative property in IE9. Check out this demo for reference:

<div style="overflow:scroll;height:120px;">
<table id="table"  width="100%">
    <tr style="position:relative;background-color:#1b72a4;">
        <td>fff
        </td>
         <td>fff
        </td>
         <td>fff
        </td>
         <td>fff
        </td>
         <td>fff
        </td>
         <td>fff
        </td>
    </tr>
    <tr>
        <td>data
        </td>
         <td>data
        </td>
         <td>data
        </td>
         <td>data
        </td>
         <td>data
        </td>
         <td>data
        </td>
    </tr>
    <tr>
        <td>data
        </td>
         <td>data
        </td>
         <td>data
        </td>
         <td>data
        </td>
         <td>data
        </td>
         <td>data
        </td>
    </tr>
    <tr>
        <td>data
        </td>
         <td>data
        </td>
         <td>data
        </td>
         <td>data
        </td>
         <td>data
        </td>
         <td>data
        </td>
    </tr>
    <tr>
        <td>data
        </td>
         <td>data
        </td>
         <td>data
        </td>
         <td>data
        </td>
         <td>data
        </td>
         <td>data
        </td>
    </tr>
     <tr>
        <td>data
        </td>
         <td>data
        </td>
         <td>data
        </td>
         <td>data
        </td>
         <td>data
        </td>
         <td>data
        </td>
    </tr>

     <tr>
        <td>data
        </td>
         <td>data
        </td>
         <td>data
        </td>
         <td>data
        </td>
         <td>data
        </td>
         <td>data
        </td>
    </tr>

     <tr>
        <td>data
        </td>
         <td>data
        </td>
         <td>data
        </td>
         <td>data
        </td>
         <td>data
        </td>
         <td>data
        </td>
    </tr>

</table>
</div>

Attempting to fix the first row by applying style="position:relative;"

Unfortunately, this style only seems to work in IE7. What can be done to fixate the first row in all versions of IE?

javascriptjqueryasp.nethtmlcss

Answer №1

Is this the solution you were looking for? It seems like you are focusing on fixing the first row to always stay on top. In that case, using position: relative; may not be the best approach. Consider using position: absolute; instead.

Check out the Demo

CSS

div {
  display: inline-block;
}

#table {
   width: 600px;
}

.fixed {
   position: absolute;
   background-color: #1b72a4;
}

.fixed td {
   width: 100px;
}

#table tr:nth-child(2) td {
   padding-top: 20px;
}

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

What is the best way to access the value of a child element using $event within AngularJS?

Utilizing $event.currentTarget to access the element on ng-click: <div ng-click="eventHandler($event)" class="bg-master m-b-10" id="slider-tooltips" nouislider=""></div> Upon inspecting my controller&apo ...

javascriptangularjsdom-events

Angular 10: Unexpected Behavior with Observables

When I initially call addPost(), the observable behaves as expected with a 5-second delay. However, when I call it a second time, the data updates in the HTML without any delay. On the other hand, the same observable with deletePost() functions perfectly. ...

htmlangulartypescript

Issues with loading Angular 9 application on Internet Explorer 11

Having trouble with my app not loading in IE 11 after adding ngx-treeview. Encountering the error (SCRIPT1002: Syntax error), Script Error Error point in vendor.js Unsure how to resolve this issue. Works fine in chrome and firefox, but in IE11 all I se ...

javascriptangulartypescripttreeviewtreeviewitem

Adjustments made to the size of the h1 font

I am perplexed by the fact that these two h1 tags have different font sizes, even though they have identical properties and declarations. From what little knowledge I have, it seems like it may be related to inheritance; considering one h1 tag is nested an ...

csstypography

Ensuring proper alignment of images and text in HTML when resizing

Trying to show an image and text side by side, I'm using the following code: div.out { background-color: silver; border: 1px solid black; padding: 10px; display: flex; } div.right { order: 1; background-color: white; border: 1px soli ...

htmlcssimage

Tips for accessing the next sequential tag that is similar in HTML with the help of jQuery

I have generated the following HTML code from some plugins. <div class="parent"> <span>item1</span> <input type="hidden"></input> <span>item2</span> <span class="active">item3</span> <inpu ...

javascriptjquery

When choosing the child option, it starts acting abnormally if the parent option is already selected in Angular

I am encountering an issue while trying to select the parent and its children in the select option. The concept is to have one select option for the parent and another for the child. I have parent objects and nested objects as children, which are subCatego ...

javascripthtmlangulartypescript

Storing numerous sets of application credentials in Node.js using a specific design pattern

As I develop a node.JS server that communicates with Microsoft APIs, the server manages multiple applications created in Azure, each requiring a configured Client ID and Client secret. I have implemented a strategy to switch between these credentials based ...

javascriptnode.jsarchitectureenvironment-variablesmicrosoft-graph-api

MultiArray authentication system

I am currently working on a multi-array login system, but I am facing an issue where only the first account is functioning properly. The other two accounts are displaying incorrect password or username errors. Account 1 corresponds to the name, Account 2 ...

phphtmllogin-script

Tips for handling an InvalidSelectorException in Selenium when logging into a website

I've been working on automating website logins using Selenium and here is the code I have written: from selenium import webdriver driver = webdriver.Chrome() driver.get("https://abcde.com") assert "xxx" in driver.title user = driver.find_element_by ...

javascriptpythonselenium

How to eliminate the comma from the final element in a JavaScript Vue.js array?

I'm looking to remove the comma from the last element in Vue, but I'm unsure how to do so since the index of the last element is unknown. <td v-if="category.sub_category.length > 0"> <template v-for=&q ...

javascriptvue.js

Vue js is throwing an error because it is unable to find the "buscador" property or method that is being referenced in the render function

I am currently diving into the world of laravel combined with Vue js. I am working on integrating a search engine using vue js components, and I would greatly appreciate any help you can provide. Thank you in advance. Below is the Vue js component where t ...

javascriptvue.js

What is the best way to input data into the verified full name box?

.html file executed code <input type="name" [(model)]="x.name" class="form-control" pattern="[a-z]" > Greetings to the members of Stack, I am in need of assistance. I am relatively new to Angular and I am looking for a way to validate the full nam ...

javascriptjqueryjsonangular

What is the best way to trigger the opening of a Component upon an onPress event?

One challenge I am facing is implementing a button in my app's Screen that should open a self-made Modal component on the same screen. To achieve this, I have set up a visible state in the screen and created an onPress handler for the button to toggl ...

javascriptandroidreactjsreact-native

How can we sort an array based on the inner HTML values of its children elements in JavaScript?

Can you arrange a JavaScript array based on the innerText values of its HTML elements? I am generating a div element (class="inbox" id="inbox${var}") with a number as its innerText, then adding all these divs to an array (numArr). I wan ...

javascripthtmlarraysdomscope

Improve Email Regular Expression to Restrict Consecutive Periods

I'm not very good with regular expressions, so I decided to seek some help. Here's the regular expression I have: /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.) ...

javascriptregexvalidation

Tips for transferring a variable from a webpage's JavaScript to Node.js

Having an issue with transferring a Javascript variable to node js for JSON file storage. The data doesn't seem to be writing to the file, possibly due to an error in the AJAX Post request or the node JS routing. The javascript is executed on an HTML ...

javascriptnode.jsajaxpost

Toggle WooCommerce Shipping Costs Using Radio Buttons

I've been struggling to find a solution for this issue. I am attempting to display or hide specific shipping rates depending on a radio button selection on the Woocommerce checkout page. However, I lack the knowledge of Ajax and JQuery required to imp ...

phpjqueryajaxwordpresswoocommerce

Using jQuery datepicker with C#/.NET for asynchronous database queries

In the C#, ASP.NET framework, I am currently exploring some new concepts. My goal is to accomplish the following tasks: Transfer data from a jQuery Datepicker textbox to the controller Analyze the date and execute a database query based on the selected r ...

c#jqueryasp.netajaxjson

What is the recommended approach for conducting backend validation?

As I develop a CRUD application using express.js and node.js, here is the backend API code that I have written: app.post("/signup", (req, res) => { const { name, email, password } = req.body; if (!name) { res.status(401).json("Please provide a n ...

javascriptnode.jsexpressvalidation