The HTML table consists of one section that can be scrolled, while the remaining sections are

I am attempting to create a unique table design where the left columns remain fixed while the right columns scroll horizontally. Additionally, I want the header of the table to stay fixed as the user scrolls down. Although I have found solutions for fixing one column, my goal is to have a table that can scroll like this:

column1 column2 column3 column4 | column5 column6 column7 
------------------------------- |------------------------
                                |
//body and header are fixed     |  //only body and header can scroll  
//when scroll down              |  //horizontally, fixed while scrolling 
                                |  //down
javascriptjqueryhtmlcss

Answer №1

Why not utilize two distinct tables within separate divs? This approach allows for greater flexibility in customizing the scrolling behavior of each table. By applying overflow-y: scroll and overflow-x: scroll to the parent div, you can achieve the desired scroll functionality.

Answer №2

By using div elements to separate the columns, it becomes simpler to reach the design objective. Implement the desired CSS styles accordingly.

To create a fixed header for a scrollable column, consider encapsulating it within another div or span tag.

Answer №3

CSS 

   table {
        width: 100%;
    }

    thead, tbody, tr, td, th { display: block; }

    tr:after {
        content: ' ';
        display: block;
        visibility: hidden;
        clear: both;
    }

    thead th {
        height: 30px;

        /*text-align: left;*/
    }

    tbody {
        height: 120px;
        overflow-y: auto;
    }

    thead {
        /* fallback */
    }


    tbody td, thead th {
        width: 19.2%;
        float: left;
    }

And in terms of HTML : 

<table class="table table-striped">
    <thead>
    <tr>
        <th>Make</th>
        <th>Model</th>
        <th>Color</th>
        <th>Year</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
    <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
            <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
     <tr>
        <td class="filterable-cell">Ford</td>
        <td class="filterable-cell">Escort</td>
        <td class="filterable-cell">Blue</td>
        <td class="filterable-cell">2000</td>
    </tr>
    </tbody>

</table>

Using this code as a reference, an interactive demo has been created.

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

Encountered a problem when trying to add an onclick event to dynamically created HTML: Uncaught SyntaxError: Unexpected identifier was

Utilizing ajax to fetch results from the code behind, I am dynamically creating divs upon receiving those results. The process works smoothly without any issues. Now, my objective is to attach an onclick event to each div that triggers a specific method w ...

javascriptjqueryhtmlcssajax

"Creating a delay within a loop using the setTimeout function

When using setTimeout in a loop, I noticed that all the operations are executed only after the loop ends. I followed the advice from multiple articles and tried putting setTimeout in a separate function, but it didn't make any difference. Here is the ...

javascript

Leveraging datatables for efficient table searching in Asp.net MVC

When using datatables to search a table, I encountered an issue where adding another table row caused some problems as datatables requires the same number of rows and columns. Is there a workaround for this? I really want to utilize datatables but also nee ...

javascriptjqueryasp.netasp.net-mvcdatatables

Unforeseeable actions of Bootstrap-datepicker

I'm currently utilizing bootstrap-datepicker from the uxsolutions collection on GitHub and I've encountered some unusual behavior. At times, it loads properly while other times it does not: https://i.stack.imgur.com/mAVAc.png When it loads corr ...

jqueryangularjstwitter-bootstraprequirejsbootstrap-datepicker

Customizing font size in React with Material UI: A comprehensive guide on adjusting the font size of the Select component

I'm currently working on a web application that utilizes React along with Material UI. My goal is to adjust the font size of the Select component. I've attempted to achieve this by utilizing the MenuProps property, as shown in the following code ...

javascriptreactjsmaterial-ui

Issues with scrolling, styling in css, and Vue challenges

I'm a beginner in this topic, currently working with Vue and CSS. I've managed to create a responsive menu, but I'm facing difficulty in implementing scroll only for the drop-down menu. The issue I'm encountering is that when I scroll, ...

cssvue.js

An Uncaught TypeError is thrown when using setTimeout()

Currently, I am configuring the .hover() function in the code below: $(".portfolio_overlay").hover(function(){ setTimeout(function(){ $(this).fadeTo(750, 0.72, "swing", function(){}); }); }); An error is being displayed on the console: U ...

javascriptjquerysettimeout

Error: Invalid character "<" found at the beginning of JSON data

I'm struggling with a common error - the link in my browser opens fine with JSON structure, but I keep getting an error when using weatherRequest.json(): Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0. Can someone help ...

javascriptjsonasync-await

Unable to show the image within the designated cropping zone

Having trouble displaying the image in the cropper. The image URL is set as the source attribute in the HTML, but the image isn't showing up. When I click the edit button, I want to show the current image (the one above the edit button) in the cropper ...

javascripthtmlcss

What is the best location to store my php file?

In the process of creating a sign up feature for an Android application, I am utilizing a MySQL database to store all the necessary data. Every example I have come across involves sending an HTTP post request to an IP address to locate the PHP file. Is i ...

javascriptphpandroidmysqldatabase

How can I use JQuery to select an element with a style attribute in Internet Explorer?

When using JQuery, I have set my target to be the following: <li style="margin-left: 15px;">blah<li> I am using this code to achieve that: $(".block-category-navigation li[style='margin-left: 15px;']").addClass('sub-menu' ...

jquerycssinternet-explorerjquery-selectorstarget

Request with content Type multipart/form experienced Error 406

I encountered an issue with my axios request in Express const formData = new FormData(); formData.append("file", fs.createReadStream(file.path)); formData.append("requestid", '123456'); const options = { method: 'POST& ...

javascriptnode.jsexpress

Accessing the scope value in Angular JS beyond the HTTP call

I am faced with a situation where I have multiple select boxes, each requiring data from different URLs to populate them. I am trying to load the response data into these boxes using the following code: function getFilterDataUrl(category_url) { var filt ...

javascriptangularjshtmlfunctionclosures

Create a button that extends beyond the boundaries of the div

I am struggling to figure out how to create a button that overlaps a div. My goal is for the button to always be positioned at the bottom center of the div, even when the size of the div changes. I can usually create overlapping divs easily when they are n ...

htmlcss

Quoting Properties in Javascript Objects

If we have the object below: var ObjectName = { propertyOne: 1, propertyTwo: 2 } Do we need to include quotes around the object properties like this? var ObjectName = { 'propertyOne': 1, 'propertyTwo': 2 } Is the sol ...

javascriptobject

Challenges arise when trying to extract parameters in Nuxt 3

Hey everyone, I've been encountering some issues with extracting params from my route in Nuxt 3. The format of my dynamic route is exam_[id]_[applicant_id].vue and once loaded, the URL appears like this: http://localhost:3000/e-recruitment/exam_cl96q ...

javascriptvue.jsnuxt.js

Save a specific row from the table into a basic array

Within my source code, I am generating a table with the following content... echo "<form id=\"center\" Name=\"Form2\" Method=\"Post\" Action=\"\">"; echo "<table border=\"1\">"; for ...

phphtmlarraysformssubmit

What is the process for showcasing specific data using Vue.js?

{ "status": "ok", "source": "n", "sortBy": "top", "articles": [ { "author": "Bradford ", "title": "friends.", "url": "http: //", "urlToImage": "http://" }, { ...

javascriptphphtmlvue.jsvue-component

Create Vue.js components

I am facing a challenge. On the server, I have a list of technologies, and in my HTML file, I want to display them dynamically: <div v-for="(technology, index) in technologies" :key="technology.id" > technology-card v-if= ...

javascriptvue.jsrender

Tips for executing a right slide animation in Jquery

I used a div class to create an arrow symbol >>. On click, I would like the list of items to slide in from left to right and pause for 20 seconds. When clicked again, it should slide back to the left and disappear. I attempted this using Jquery but ...

jquerycssajax