Implement a horizontal scrollbar for your table in HTML

I need to implement a horizontal scroll bar for my table.

Here is the HTML code:

Even though I have utilized Bootstrap, the horizontal scroll bar is not working for this particular module. It works fine in other modules. The tbody data is added after an AJAX call.

I have also attempted to use the following CSS properties:

overflow-x: auto
white-space: nowrap

The data is not displaying correctly to the right side; it is extending beyond the screen size, forcing me to zoom out to view the entire table.

<div class="modal fade" id="new-modal">
  <div class="tble-grid-wrapper">
    <div class="table-responsive pl-3 pr-3">
      <table id="selectedDevices" class="table table-sm table-striped" class="display">
        <thead>
          <tr>
            <th>HEADER 1</th>
            <th>HEADER 2</th>
            <th>HEADER 3</th>
            <th>HEADER 4</th>
            <th>HEADER 5</th>
            <th>HEADER 6</th>
            <th>HEADER 7</th>
            <th>HEADER 8</th>
            <th>HEADER 9</th>
            <th>HEADER 10</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>
  </div>
</div>

javascripthtmlcssajaxbootstrap-4

Answer №1

  1. Wrap your table inside a div (this step is already completed in your case)

  2. Set the width of this div to 100vw. This ensures that the table will always take up 100% of the viewport width, regardless of the parent element's size.

  3. Include overflow-x: auto to enable a horizontal scrollbar. That's all you need to do!

Check out the demonstration below

#new-modal {
    width : 100vw;
    overflow-x: auto;
}
<div class="modal fade" id="new-modal">
  <div class="tble-grid-wrapper">
    <div class="table-responsive pl-3 pr-3">
      <table id="selectedDevices" class="table table-sm table-striped" class="display">
        <thead>
          <tr>
            <th>HEADER 1</th>
            <th>HEADER 2</th>
            <th>HEADER 3</th>
            <th>HEADER 4</th>
            <th>HEADER 5</th>
            <th>HEADER 6</th>
            <th>HEADER 7</th>
            <th>HEADER 8</th>
            <th>HEADER 9</th>
            <th>HEADER 10</th>
            <th>HEADER 11</th>
            <th>HEADER 12</th>
            <th>HEADER 13</th>
            <th>HEADER 14</th>
            <th>HEADER 15</th>
            <th>HEADER 16</th>
            <th>HEADER 17</th>
            <th>HEADER 18</th>
            <th>HEADER 19</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>
  </div>
</div>

Answer №2

<div class="modal fade" id="new-modal" style="width:100%;overflow-x:scroll;">
  <div class="tble-grid-wrapper">
    <div class="table-responsive pl-3 pr-3">
      <table id="selectedDevices" class="table table-sm table-striped" class="display">
        <thead>
          <tr>
            <th>HEADER 1</th>
            <th>HEADER 2</th>
            <th>HEADER 3</th>
            <th>HEADER 4</th>
            <th>HEADER 5</th>
            <th>HEADER 6</th>
            <th>HEADER 7</th>
            <th>HEADER 8</th>
            <th>HEADER 9</th>
            <th>HEADER 10</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>
  </div>
</div>

the desired style is width: 100%; overflow-x: scroll

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

Tips for automatically closing a dropdown menu when it loses focus

I'm having some trouble with my Tailwind CSS and jQuery setup. After trying a few different things, I can't seem to get it working quite right. In the code below, you'll see that I have placed a focusout event on the outer div containing th ...

javascriptjquerycsstailwind-cssdropdown

empty area located on the right side of my HTML/CSS website

I'm struggling to figure out why a small white space appears next to my webpage. Inspecting the element shows that the body ends before the space begins, indicating the border is where it should be. As a beginner in HTML and CSS, I hope this issue wil ...

htmlcsswhitespace

What is the best way to integrate react-final-form with material-ui-chip-input in a seamless manner

Currently, I am utilizing Material UI Chip Input wrapped with Field from react-final-form. https://i.sstatic.net/vJKM1.jpg The main objective is to restrict the number of "CHIPS" to a maximum of 5. Chips serve as concise elements representing inputs, at ...

javascriptmaterial-uireact-final-form

The XML response from Ajax is returning as empty

My goal is to retrieve XML data from an ajax request and extract information using the DOM. The ajax request itself seems to be working fine as I can access AjaxRequest.responseText without any issues. However, I am encountering an error message stating: ...

javascriptxmlajaxnullxmlhttprequest

Determine the count of checkboxes on a webpage by identifying the presence of the keyword 'type' in the page source code, utilizing Selenium with Python

Here is a code snippet to find the number of checkboxes on the current webpage: checkboxes = driver.find_elements(By.XPATH("html/body/div[2]/div/section[8]/div/div/div[3]/div/div[2]/table/tbody/tr[1]/td[1]/input[@type='checkbox']")) However, wh ...

pythonhtmlpython-3.xseleniumselenium-webdriver

How come my web page is not displaying the guages from guage.js?

I am utilizing guage.js to create a graph based on this Fiddle. However, upon adding the same code to my website, the rendering does not appear as expected: https://i.sstatic.net/fIkQr.png Upon inspecting in Chrome developer tools, I noticed that the ele ...

javascripthtmljquerycss

When the selectOneListBox is set to display only one option at a time, it will be

Using h:selectOneListBox to populate data dynamically, starting with an empty list. Each time the user clicks "Add," a new entry is added to the list box. The list box has a specific height set, but there's an issue when it contains only one entry. I ...

htmljsflistboxselectonemenu

Uncover the hidden message within the unique special character "ì"

My JSON file contains a specific character, such as ì; Here is the service I am using: $http({ url: jsonUrl, method: "GET" }).success(function (data) { // data is an array that contains a list of elements (f ...

htmljsonhtml-escape-characters

Transferring map functionality to a separate file

Is it possible to export the function inside the orders.map, specifically 'order', and then import it into another JS file with a function inside? I keep receiving an error that order is not defined. Thank you main.js const getReport = asy ...

javascriptnode.jsecmascript-6ecmascript-5

The left and right edges are not extending across the entire screen

Can anyone help me determine if this is a duplicate issue? I'm unsure why my left and right borders are not extending the full width of the screen. The website in question is ojs.monojitbanerjee.co.cc Here is the structure: <body> <div id= ...

htmlcss

Utilizing React to initiate AJAX requests within an input's onChange event

I have created a SearchForm.js file where I want to implement an AJAX request that triggers whenever the input field with the id keywords is changed. This request will send the value of the input to another server, retrieve some data, and use it for auto ...

ajaxreactjs

What is the best way to exclude a particular character from a text element utilizing jquery?

Looking to extract the numerical value from a div containing: <div class="balance"...>$500.48</div> The goal is to retrieve 500.48 as a number, not a string. One approach is to use alert($(".balance").text()) to verify that the content is ret ...

javascriptjqueryhtml

Tips for enhancing the flexibility of the owl carousel

I've been trying to make four items fit on a medium screen and two on a mobile device, but no matter what I do - adjusting widths, heights, columns, and responsive classes like col-6, col-md-3, col-lg-3 - nothing seems to work well. I could really use ...

htmlcssbootstrap-5owl-carousel

What are the steps to create two frames using Twitter Bootstrap?

I'm just starting to work with Twitter Bootstrap and I need some help. Can someone assist me in creating a two-column layout inside the HTML, where the menu in the header stays visible even when scrolled down? I've included my HTML code below. Th ...

javascriptjqueryhtmlcsstwitter-bootstrap

Encountering the error message "Unable to access /" on the browser when using express router

Just started working with the express Router for the first time. Here is my route.js: var express = require('express'); var router = express.Router(); router.get('/', function(req, res) { res.send('home page'); }); module.e ...

javascriptnode.jsexpress

The node.js server responds with undefined after an AJAX request

Currently, I am facing a challenge in retrieving and accessing a string that is produced by a serverside function in Node.js. function createString () { do something ... console.log(finalString); return finalString; }; To fetch this string f ...

javascriptnode.jsajaxexpressasynchronous

Guide on incorporating dxTreeView with AngularJS

Hello there, I am trying to utilize the dx-tree-view component. In my Home.html file, I have included the following HTML code: <div dx-tree-view="treeViewOptions"></div> And in my HomeController.js: $scope.treeViewOptions = { binding ...

javascriptasp.netangularjsdevextreme

Error message: "Despite using the 'use client' function in Next.js, a ReferenceError occurs as 'window' is undefined."

What is the reason for the server running this hook when "use client" is included? It does not lead to any application crashes, everything functions with no errors, but an error is logged at the const [windowWidth, setWindowWidth] = useState(window.innerWi ...

javascriptreactjsnext.js

Generate unique links for each individual object

I am dealing with an array of objects that look like this: const myData = [ { "image": "https://placedog.net/300?random", "name": "A", }, { "image": "https://placedog.net/300?random&q ...

javascriptjsonreactjssemantic-ui

Contrasting loading data from an empty state and having no items present

On my web page, I pull items from an API and display them. The API request is made in the created hook. I need to display a [loading] message while waiting for the API response, and a [no items] message if the loading is complete but there are no items ava ...

javascriptvue.jsvuejs2