https://i.sstatic.net/n75q5.png
I plan on navigating horizontally within the highlighted orange section.
The concept of implementing this technology is beyond me at the moment.
My goal is to minimize the usage of plug-ins as best as I can.
If you are knowledgeable about this, I would greatly appreciate your assistance.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<p>Css</p>
<style>
table {
border-collapse:collapse; }
.long {
background:yellow; letter-spacing:1em; }
div.first1 {
width: auto;
height: 150px;
padding-bottom: 1px;
position: absolute;
left:0;
top:auto;
}
div.second1 {
width: 600px;
overflow-x:scroll;
overflow-y:visible;
margin-left:5em;
padding-bottom:1px;
height:auto;
}
.headcol {
position: absolute;
width: 5em;
left: 0;
top: auto;
border-right: 0px none black;
border-top-width: 3px;
margin-top: -3px;
}
</style>
</head>
<body>
<p>Html</p>
<div class="first1">
<div class="second1">
<table style="border:1px solid black;" border="1">
<tr>
<td class="headcol">11111111111</td>
<td class="long">22222222222222222222222222222222222222222222</td>
</tr>
<tr>
<td class="headcol">1</td>
<td class="long">22222222222222222222222222222222222222222222</td>
</tr>
<tr>
<td class="headcol">1</td>
<td class="long">22222222222222222222222222222222222222222222</td>
</tr>
<tr>
<td class="headcol">1</td>
<td class="long">22222222222222222222222222222222222222222222</td>
</tr>
<tr>
<td class="headcol">1</td>
<td class="long">22222222222222222222222222222222222222222222</td>
</tr>
</table>
</div>
</div>
</body>
</html>
To achieve this specific structure, the key is to utilize overflow scroll on the parent element. I have successfully implemented this on Codepen, where you can access the link provided below.
Here's a snippet of the HTML code:
<div class="container">
<div class="header">
HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER
</div>
<div class="sidebar">
<p>This</p>
<p>Is</p>
<p>Sidebar</p>
<p>Block</p>
</div>
<div class="tcontainer">
<table>
<tbody>
// Multiple rows and data here
</table>
</div>
</div>
For the CSS styling:
.header{
padding:10px;
background: #eee;
}
.sidebar{
background: #ddd;
float: left;
width: 30%;
min-width: 100px;
}
.container{
width: 500px;
}
.tcontainer{
width: 70%;
overflow: auto;
}
td{
background: grey;
text-align: center;
width: 50px;
padding: 5px 20px;
}
<div>
<div class="contentTbl">
<div class="tblContent">
<div class="headerTblFix">
<p>Header A</p>
<p>Header B</p>
</div>
<div class="contentFixTbl contentTblSec">
<div class="contentFixTblRow">
<p>Content Fix X</p>
<p>Content Fix X</p>
</div>
<div class="contentFixTblRow">
<p>Content Fix Y</p>
<p>Content Fix Y</p>
</div>
<div class="contentFixTblRow">
<p>Content Fix Z</p>
<p>Content Fix Z</p>
</div>
<div class="contentFixTblRow">
<p>Content Fix W</p>
<p>Content Fix W</p>
</div>
</div>
</div>
<div class="tblContent">
<div class="headerTblFix">
<p>Header C</p>
<p>Header D</p>
</div>
<div class="contentScrollTbl contentTblSec">
<div class="contentScrollTblRow">
<p>Content Scroll I</p>
<p>Content Scroll I</p>
</div>
<div class="contentScrollTblRow">
<p>Content Scroll II</p>
<p>Content Scroll II</p>
</div>
<div class="contentScrollTblRow">
<p>Content Scroll III</p>
<p>Content Scroll III</p>
</div>
</div>
</div>
</div>
</div>
<style>
.tblContent{
display:inline-block;
width: 304px;
}
.tblContent p{
border: 1px solid #ccc;
width: 150px;
padding: 0px;
margin: 0px;
text-align: right;
display: table-cell;
}
.headerTblFix, .contentFixTbl{
position:fixed;
}
.headerTblFix{
height:20px;
}
.contentFixTbl{
height:150px;
margin-top: 20px;
}
.contentScrollTbl{
overflow: auto;
width: 304px;
height: 150px;
position: absolute;
margin-top: 20px;
}
</style>
I have some code that I am trying to integrate with Node.js for Firebase notifications on my Android application. I found a blog post outlining the implementation here: The Node.js code listens to changes in my Firebase Database and triggers notifications ...
Hello amazing Stackoverflow community! I need your help to figure out how to extract data from a weather REST API using JavaScript. I'm struggling to fetch the weather condition and date/time information from this API. { info: { _postman_i ...
Is there anyone who can assist me with this issue? I have set up a CSS grid that works properly above 768px when the min-width is specified. However, as I scale below that threshold, the layout remains unchanged and the media tag doesn't seem to take ...
Every time I try to call a function that clearly appears to be defined as a function, I continuously receive the error message: TypeError: [function name] is not a function. To demonstrate the issue, here is a simple example: main.ts import someFunction ...
I am just starting out with angular js and this login page is my first step. I have created a basic login form, but when I click on the login() button, the form() does not get submitted and it keeps showing an error message saying "invalid username and pas ...
function CreateCinemas() { Services.AdminWebServices.CreateCinemasSVC(oCinemas, OnSuccessCinemas, OnError, OnTimeOut); } function OnSuccessCinemas(response1) { Services.AdminWebServices.AddTicketPricesSVC(oTicketPrices, OnSuccessTicketPrices, OnError, ...
While attempting to create dependent dropdowns, I encountered an error during compilation. The specific error message that appeared was: File "C:\...\operations\urls.py", line 13, in <module> path('ajax/load-stations/', ...
As I make the transition from Nuxt 2 to Nuxt 3 for a large application, I began by setting up a fresh Nuxt 3 project and transferring code over. However, an issue arose when working with my old middleware array in the nuxt.config.js file. Here's what ...
Below is the JavaScript function I am using to create a URL: function reload(form){ var val1=form.dav.options[form.dav.options.selectedIndex].value; var val2=form.pathogen.options[form.pathogen.options.selectedIndex].value; var val3=form.topicF.options[for ...
I recently made the switch from using PrettyPhoto to FancyBox for my gallery, which utilizes Isotope for filtering and animations. However, I am encountering an issue where the images appear but the thumbnails are missing. In the developer tools, there is ...
I'm facing a challenge with my dynamic website that has numerous blog posts. My goal is to initially load only four posts and then add another four as the user scrolls to the end of the page. While I have figured out how to handle this on the backend, ...
I have an algorithm for tweeting that eliminates @-mentions and will not post tweets under the following conditions: 1) if the question is different from the answer, 2) if the composed tweet exceeds 140 characters, and 3) if the tweet is potentially sensit ...
I am attempting to send a JS object (map) to a C++ member function with the following signature Q_INVOKABLE virtual bool generate(QObject* context); using a.generate({foo: "bar"}); The method is being called (confirmed via breakpoint), however, the pa ...
Currently, I have a component from line 61-67 that controls the state of an editIcon. The issue is that it changes the state values for all items in the column, rather than just the specific item or row it should apply to. When hovering over a span element ...
I am working on creating a notification bar that will be displayed and hidden using CSS animation. My challenge is finding the right delay between the two animations. HTML <div id="notification" class="alert" role="alert"></div> JS $(' ...
In my Angular 2 / Typescript project, I am working with a string that contains numeric values such as the ones listed below: 10000 10000.50 -10000 -10000.50 0 I need to insert commas after every thousand mark in these numbers, like so: 10,000 10,00 ...
When it comes to optimizing the retrieval of records for a Backbone collection I've defined, my approach involves utilizing the filters I've implemented in Tasty Pie. How can I instruct Backbone to integrate these filters? It seems that Backbone ...
I encountered an error while trying to create Sequelize migrations in my Node.js app (which is set up with Typescript). When running npx sequelize-cli db:migrate, I received an "import method" error, but I'm unable to pinpoint the source of this issue ...
let changeClassDisplay = document.getElementsByClassName('sidebar'); for (var i = 0; i < changeClassDisplay.length; i += 1) { changeClassDisplay[i].style.display = 'block'; } I encountered an issue with this code whe ...
I have been experimenting with a combination of jQuery plugins that I found on this website. It seems to be a well-written piece of code, but I am encountering a couple of issues. My main problem is that when I try to upload a file larger than the maximum ...