Locked first row and first column in HTML table

I'm struggling with freezing the first row and column in an HTML file exported from Microsoft Excel. When attempting to add position:fixed; to achieve this, I noticed that it changes the size and alignment of the headers. Can someone please advise me on how to freeze the elements without affecting their alignment and size? Below is the source code of the HTML file. Your help would be greatly appreciated! Thank you in advance. -David 

<html xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:x="urn:schemas-microsoft-com:office:excel"
xmlns="http://www.w3.org/TR/REC-html40">

<head>
<meta http-equiv=Content-Type content="text/html; charset=windows-1252">
<meta name=ProgId content=Excel.Sheet>
<meta name=Generator content="Microsoft Excel 14">

<style id="STORE-FREEZE_14759_Styles">
<!--table
{mso-displayed-decimal-separator:"\.";
mso-displayed-thousand-separator:"\,";}
.xl1514759
{padding-top:1px;
padding-right:1px;
padding-left:1px;
mso-ignore:padding;
color:black;
font-size:11.0pt;
font-weight:400;
font-style:normal;
text-decoration:none;
font-family:Calibri, sans-serif;
mso-font-charset:0;
mso-number-format:General;
text-align:general;
vertical-align:bottom;
mso-background-source:auto;
mso-pattern:auto;
white-space:nowrap;}
.xl6314759
{padding-top:1px;
padding-right:1px;
padding-left:1px;
mso-ignore:padding;
color:white;
font-size:9.0pt;
font-weight:700;
font-style:normal;
text-decoration:none;
font-family:Calibri, sans-serif;
mso-font-charset:0;
mso-number-format:General;
text-align:left;
vertical-align:middle;
border:2.0pt double #3F3F3F;
background:#4BACC6;
mso-pattern:black none;
white-space:normal;}
.xl6414759
{padding-top:1px;
padding-right:1px;
padding-left:1px;
mso-ignore:padding;
color:white;
font-size:9.0pt;
font-weight:700;
font-style:normal;
text-decoration:none;
font-family:Calibri, sans-serif;
mso-font-charset:0;
mso-number-format:General;
text-align:center;
vertical-align:middle;
border:2.0pt double #3F3F3F;
background:#4BACC6;
mso-pattern:black none;
white-space:normal;}
.xl6514759
{padding-top:1px;
padding-right:1px;
padding-left:1px;
mso-ignore:padding;
color:black;
font-size:9.0pt;
font-weight:400;
font-style:normal;
text-decoration:none;
font-family:Calibri, sans-serif;
mso-font-charset:0;
mso-number-format:General;
text-align:center;
vertical-align:middle;
border:.5pt solid windowtext;
mso...
-->
</style>
</head>

<body>
<!--[if !excel]>&nbsp;&nbsp;<![endif]-->
<!--The following information was generated by Microsoft Excel's Publish as Web
Page wizard.-->
<!--If the same item is republished from Excel, all information between the DIV
tags will be replaced.-->
<!----------------------------->
<!--START OF OUTPUT FROM EXCEL PUBLISH AS WEB PAGE WIZARD -->
<!----------------------------->

<div id="STORE-FREEZE_14759" align=center x:publishsource="Excel">

<table border=0 cellpadding=0 cellspacing=0 width=355 style='border-collapse:
 collapse;table-layout:fixed;width:267pt'>
 <col width=51 style='mso-width-source:userset;mso-width-alt:1865;width:38pt'>
 <col width=46 style='mso-width-source:userset;mso-width-alt:1682;width:35pt'>
 <col width=176 style='mso-width-source:userset;mso-width-alt:6436;width:132pt'>
 <col width=82 style='mso-width-source:userset;mso-width-alt:2998;width:62pt'>
 <tr height=66 style='height:49.5pt'>
  <td height=66 class=xl6414759 width=51 style='height:49.5pt;width:38pt'>SL.NO</td>
  ...
</table>

</div>


<!----------------------------->
<!--END OF OUTPUT FROM EXCEL PUBLISH AS WEB PAGE WIZARD-->
<!----------------------------->
</body>

</html>

javascripthtmlcss

Answer №1

When it comes to keeping the HTML Header Row and 1st column fixed, the process is more intricate than one might imagine.

  1. Step 1: Start by creating a DIV that contains a table with only the header row.
  2. Set the DIV to be fixed and enable overflow X to display.
  3. Next, create another DIV with a Table that consists of just 1 column for your fixed 1st column.
  4. Set this DIV to be fixed as well, and turn on overflow Y to show.
  5. Then, create an additional DIV with a table containing the rest of the data.
  6. Again, set this DIV to Fixed and adjust the overflow to auto.

If you're looking to implement both X and Y axis scroll bars simultaneously, check out this resource: Scroll 2 scrollbars with jquery the same time

Should you require sample code examples, feel free to reach out.

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

Make the div fill the entire width and height of its parent element

Here is the code I am working with: <div> <div class="inner"></div <img src="blabla" /> </div> My goal is to make the .inner div 100% width and 100% height of its parent div, which is dependent on the dimensions of th ...

htmlcss

Incorporate ng-click as an attribute in AngularJS

Is there a way to include ng-click as an attribute? For example, imagine I want to add ng-click if my <li> has the class someClass: angular.element(root.querySelector('li.someClass').attr({'ng-click': 'someFunc()'}); ...

javascriptjqueryhtmlangularjs

The keys within a TypeScript partial object are defined with strict typing

Currently, I am utilizing Mui components along with TypeScript for creating a helper function that can generate extended variants. import { ButtonProps, ButtonPropsSizeOverrides } from "@mui/material"; declare module "@mui/material/Button&q ...

javascriptreactjstypescriptmaterial-ui

Converting constants into JavaScript code

I've been diving into typescript recently and came across a simple code snippet that defines a constant variable and logs it to the console. const versionNuber : number = 1.3; console.log(versionNuber); Upon running the tsc command on the file, I no ...

javascripttypescript

Animation triggered by scrolling is not functioning/displaying div

I'm attempting to make a div fade up when it enters the viewport by using the library found at https://github.com/michalsnik/aos Unfortunately, all that seems to happen is that the div gets hidden. In the head section of my HTML file, I've refe ...

javascriptjqueryanimation

Utilizing asynchronous functions to assign a JSON dataset to a variable

Having an issue here! I've created a function to retrieve data from a local JSON file on my server. The problem is that the data is returned asynchronously, so when I try to set it to a variable for later use, it always ends up being undefined. I don& ...

javascriptajaxjsonasynchronous

Is there a way to handle button click event when utilizing this.props.children in React?

I have recently completed a React component that serves as a modal wrapper. The content for this modal is passed through the props.children property. Inside the content, there is a button that, when clicked, should trigger an event in the parent component. ...

javascriptreactjschildrenpreact

Is there a way to modify an element in an array in AngularJS without using splice?

I encountered a situation similar to the one described in this post here, where I not only want to retrieve an element but also change its name value. I came across a method that involves using splice: dataList.splice(index, 1); dataList.splice(index, 0, ...

javascriptarraysjsonangularjs

What could possibly be causing this element to shift side to side (in IE only) during the CSS animation?

UPDATE: Issue occurring on Internet Explorer 10, Windows 7 When using the transform property to adjust the horizontal position of an element during animation, the vertical value is updated as well. However, despite setting the horizontal value to the same ...

javascripthtmlcsscss-animations

Avoid jQuery ContextMenu Submenu Items from Expanding in Size on Mobile Devices

Recently, I started using the jQuery contextMenu which can be found at . The issue I encountered involves a menu with a submenu. Whenever I try to access the submenu items on mobile Safari or Chrome, the size of the menu items suddenly doubles and gets cu ...

jquerycssbootstrap-4

Navigating a parameter within an AngularJS directive

I am currently developing a directive that acts as a wrapper for the freebase search widget using jQuery. This is my first attempt at creating a directive and I have encountered some challenges. Here are the functionalities I am aiming for: 1. The ability ...

javascriptangularjsangularjs-directivefreebase

Tips for incorporating line breaks into a contenteditable div using the key combination of ctrl + enter

$("#contenteditable").keydown(function(e) { var last = false; if (e.keyCode == 13) { if (e.ctrlKey) { let brNode = document.createElement('br'); let range = window.getSelection().getRangeAt(0); ...

javascripthtmljquery

Building a bespoke search input for the DataTables JQuery extension

As the title indicates, I am in the process of developing a custom search box for the DataTables JQuery plugin. The default options do not suit my needs, and configuring the DOM is also not ideal as I aim to integrate it within a table row for display purp ...

javascriptjqueryhtmlcssdatatable

`Implementing Typescript code with Relay (Importing with System.js)`

Is there a way to resolve the error by including system.js or are there alternative solutions available? I recently downloaded the relay-starter-kit (https://github.com/relayjs/relay-starter-kit) and made changes to database.js, converting it into databas ...

javascripttypescriptsystemjsrelay

Updating state in React using the spread operator is not allowed

As a newcomer to React, I've been struggling with using the spread operator to push new elements into an array stored in the state. My aim is to create an array with a sequence of different numbers. Here's the code snippet that I've been wor ...

javascriptreactjsreduxspread-syntax

Error in Access-Control-Allow-Origin when using Node.js and JSONP

It seems like JSONP eliminates cross domain restrictions. I am currently attempting to create a JSONP service with node and express. Below is a simple example of the code: self.routes['/portfolio'] = function(req, res) { // Website you wis ...

javascriptnode.jsexpresscross-domain

Enable the ability to scroll and click to navigate an overlapping Div element

A customer has a website with a dark teal design and is not pleased with the appearance of the scroll bar, as it disrupts the overall style. The client requested that I find a solution without using third-party libraries, and one that they can easily under ...

javascripthtmlcss

The absence of "_ssgManifest.js" and "_buildManifest.js" files in a Next.js application deployed on Google Cloud Platform was discovered

Upon opening the website, there are instances where the console displays the following errors: GET https://example.com/subpath/_next/static/9ufj5kFJf/_buildManifest.js [HTTP/3 404 Not Found 311ms] GET https://example.com/subpath/_next/static/9ufj5kFJf/_ss ...

javascriptreactjsgoogle-cloud-platformnext.jsgcloud

What is the method to modify a section of a URL based on form input?

I am currently developing a website that allows users to interact with product images by clicking buttons, entering text into forms, and using a slider to view different angles of the product. My main goal is to extract user input from form fields and dyn ...

phpjqueryhtmlformsslider

Issue with publishing npm package using yarn package manager

I'm currently in the process of releasing a fresh package. Utilizing ES6, I've been transpiling my files through babel to start with. However, I've hit a roadblock at this particular stage: https://i.stack.imgur.com/iIVp6.png This part se ...

javascriptnode.jsnpmyarnpkg