How can you create a fixed column with horizontal scroll in Bootstrap?

Imagine I have the following table structure:

          <table class="table table-bordered table-striped table-hover">
            <thead>
            <tr>
                <th>#</th>
                <th>Table heading</th>
                <th>Table heading</th>
                <th>Table heading</th>
                <th>Table heading</th>
                <th>Table heading</th>
                /* ... more table headers */
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>ID 1</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
            <tr>
                <td>ID 2</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
                /* ... more table rows */
            </tbody>
        </table>

I want to expand on the table headers and make the table horizontally scrollable. Is there a way to keep the first column (with the IDs) fixed so that it remains visible when the user scrolls horizontally?

A similar setup can be seen using a jQuery plugin available at this link: (see live demo here: )

htmlcsstwitter-bootstraphtml-table

Answer №1

To achieve the desired layout, you should set the position of the first column to absolute. This can be easily accomplished by applying this style to the first <td> tag in each row using a class. Additionally, provide a width for the column and then set a negative left margin equal to the width to position it on the left side of your scrolling content.

Next, create a container around your table and set its overflow-x property to scroll. This will enable the table to scroll horizontally when needed. Make sure to specify a width for the container so that any content exceeding this width becomes scrollable.

Lastly, add white-space: nowrap to both <th> and <td> elements to prevent text wrapping within cells.

Check out the demo here

th, td {
    white-space: nowrap;
}

.first-col {
    position: absolute;
    width: 5em;
    margin-left: -5em;
}

.table-wrapper {
    overflow-x: scroll;
    width: 600px;
    margin: 0 auto;
}

<div class="container">
    <div class="table-wrapper">
        <table class="table table-bordered table-striped table-hover">
            <thead>
                <tr>
                    <th class="first-col">#</th>
                    <th>Table heading</th>
                    <th>Table heading</th>
                    <th>Table heading</th>
                    <th>Table heading</th>
                    <th>Table heading</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="first-col">ID 1</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                </tr>
                <tr>
                    <td class="first-col">ID 2</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

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

Add styling to a window popup and close it when focus is lost in Ext JS

I am trying to implement a specific functionality where the popup arrow should be at the edge of the textbox as shown in the image below. How can I achieve this? Additionally, how can I make sure that clicking outside the control destroys the popup instead ...

javascriptcssextjstextboxpopover

Selection of child elements using CSS selectors

I have the following HTML snippet and I want to target the second child with the class name "embed": <div class="embed-container">test</div> This is what I tried: .feature-row .threecolumns .caption:nth-child(2) { border: 1px solid red; ...

htmlcss

Populate Vue components in auto-generated HTML code

Utilizing a WYSIWYG article editor, I generate HTML content for articles that is saved in the database and displayed to users at a later time. However, I am facing an issue where I need to embed Vue components within this generated HTML in order to showca ...

javascripthtmlvue.jstrumbowyg

How to style an element with multiple parent elements in CSS

Is there a way to target the p element in the code snippet below in order to reset its color property? I want to change it to 'none' or something similar. Any guidance on how to achieve this would be greatly appreciated. <div class="a"> ...

csscss-selectors

Adjusting the initial date on the Datepicker

I am currently working on developing a calendar using bootstrap datepicker that should enable users to select a day starting 24 hours from the current date. I came across a similar query posted on Stack Overflow in the past, but the suggested solution isn& ...

jquerytwitter-bootstrapdatepicker

Using the `implode()` function in PHP to concatenate values for a MySQL query

Recently, I ran into an issue while using the implode function in PHP. <?php $insertValues[] = "(default,'{$y}', '{$p}', '{$o}', '{$i}', '{$u}','AMM-40','test')"; $query_status = ...

phpmysqlhtml

Locking element in place beneath precise browser width

Below is the script I am working with: $(window).resize(function(){ if ($(window).width() >= 992){ var windw = this; $.fn.followTo = function ( pos ) { var $this = this, $window = $(windw); $window.scroll(function(e){ if ($window.scrol ...

jquerycss

Pressing the reset button will restore the table to its original

As a new React developer with experience mainly in hooks, I have been struggling to find a good example involving hooks. Currently, I am working on implementing an antd table with search functionality. My question is, when a user types something into the ...

javascriptcssreactjshtml-tableantd

The Update Panel in IE9 is malfunctioning when attempting to click the button

Currently, I am working on a project using ASP.NET C#. I have implemented Select2 in an update panel. However, I am facing an issue where my button click does not work after a postback. To resolve this problem, I have added the following code to rebind ...

c#jqueryasp.nethtmlinternet-explorer-9

The alert feature does not seem to be functioning properly when displaying error messages

// Issue: Alert is not working on error message. I intend to only display up to four issues, after that it should not work. success: function(msg, String, jqXHR) { window.location = 'home.html'; $("#result").html(msg, String, jqX ...

javascriptjqueryhtmlajax

What is the process of extracting images from HTML code and verifying their presence on my web server?

Recently, I've been working on a post editor where I need to generate thumbnails from images inserted in the HTML code. But before diving into that task, I want to extract all basic image attributes. For example: $mydomain = 'mysite.com'; ...

phphtmlregeximage

What is the best way to use appendChild within an AJAX get function to manipulate the DOM

I've been working on a code function where I try to append a list item (li) into the HTML received in 'msg', but it's not functioning properly. Any ideas why? function handleFileSelect(evt) { var files = evt.target.files; $(&ap ...

javascriptjqueryajaxhtml

How to retrieve the value of a selected item in primeng using p-dropdown and angular

Encountering an issue when trying to send the selected item value while iterating over an array of strings like: "BMW", "FERRARI", "AUDI", "BENTLY" Here is the structure of my HTML: <p-dropdown optionLabel="type" [options]="cars" formControlName="name" ...

htmlangulartypescriptprimeng

Implementing microdata without visibly displaying tagged entities on the webpage

I have a query regarding the implementation of Microdata on my webpage where tagged entities are not being displayed. For instance, I want to talk about two individuals in a paragraph without their names appearing on the webpage. Is there a method to only ...

htmlmicrodata

Performing two consecutive nested AJAX requests in jQuery using JavaScript

I am facing an issue with my code. My goal is to create a cryptocurrency ranking feature on my website. I have integrated an API that provides logos, symbols, indices, prices, etc. of cryptocurrencies. However, I encountered a problem as this API doesn&apo ...

javascriptjqueryhtmlajax

Interactions of selecting dates in datepicker widget

Currently, I am working on developing my personal work website. One issue I have encountered is with the calendar feature. The "From" date can be selected before today's date, which is not ideal. Additionally, if a date 5 days from now is chosen as th ...

javascriptjquerycssdate

Once the user clicks on the download button, the backend should initiate the download process

I am seeking a solution where a download can be triggered in the background when a download button is clicked, without interrupting other tasks. Is there a way to achieve this in PHP? If so, what method can be used? I have attempted using the curl function ...

javascriptphphtmlajax

What is the reason behind getElementsByClassName not functioning while getElementById is working perfectly?

The initial code snippet is not functioning correctly DN.onkeyup = DN.onkeypress = function(){ var div = document.getElementById("DN").value document.document.getElementsByClassName("options-parameters-input").style.fontSize = div; } #one{ heigh ...

javascriptjqueryhtmlcss

How can I create a placeholder in semantic-ui components?

I'm currently utilizing the plugin and facing an issue with displaying the placeholder. Although data retrieval from the database is functioning properly, the placeholder is not being shown. Note:- When I remove the PHP code, the placeholder display ...

javascriptphphtmlhtml-selectsemantic-ui

Tips for preventing redundant data entry in a table

Currently, my table displays like so: https://i.sstatic.net/iozOF.jpg The structure of the HTML for the table is as follows (only a snippet is shown, as the rest looks similar): <table class="table table-bordered table-condensed"> <tr> ...

htmlangularjs