Achieving horizontal scrolling for tables without using div wrappers

Whenever the width of tables in my articles exceeds the available space in the webpage layout, I wanted to enable horizontal scrolling.

Despite trying to accomplish this with CSS alone, I was unsuccessful. As a result, I resorted to enclosing everything in a div using jQuery:

$('table.data').wrap('<div class="tcontain" />');

Subsequently, I implemented the following CSS:

.tcontain {
    width: 100%;
    overflow-x: scroll;
}

While this solution works, I am seeking a way to achieve this without the use of JavaScript. Any assistance would be greatly appreciated!

htmlcssoverflowcss-tables

Answer №1

Although I came across this solution, unfortunately it does not function in Internet Explorer, including IE9.

table {
    max-width: 100%;
    overflow-x: auto;
    display: block;
}

Check out this example on JSFiddle

Ultimately, I believe that your JavaScript solution would be the most effective option if you wish to avoid modifying the markup in your files.

Answer №2

Adjust the width of your table to fill 100%.

table {
    width: 100%;
}

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

Implement a counter in a JavaScript table, initializing it to zero

I have successfully written my code, but there is one issue. The first row is starting with the number one instead of zero. I'm looking for suggestions on how to start from zero. Any help would be greatly appreciated. Thanks! <script> var tabl ...

javascriptjqueryhtml

Sending a concealed input according to the chosen option

I'm attempting to send some hidden values to a Servlet via a form, but my goal is to only pass them if the user chooses a specific option. <!-- FORM ABOVE --> <input type="hidden" name="foo" id="foo" value="foo"> <input type="hidden ...

javascripthtmlformsservletshidden-field

What is the best way to eliminate the left margin entirely in CSS?

I am attempting to create an image view that fully covers the window, without any margins. I have tried various solutions such as setting the body margin and padding to 0, but they do not seem to work. body { margin: 0px; padding: 0px; } or *, html { ...

htmlcssangulartypescript

Issue with React Hot Toast not displaying properly due to being positioned behind the <dialog>

The Challenge of Toast Notifications Visibility with <dialog> Element tl;dr When utilizing the native dialog.showModal() function, the <dialog> element appears to consistently remain on top, which causes toast notifications to be obscured by ...

javascripthtmlnext.jsdialogreact-hot-toast

What is causing the resistance in changing the color of my current navigation items?

I've encountered a small challenge with my header section. Despite multiple attempts, I'm struggling to change the color of the 'current' menu item. It seems that overriding Bootstrap's default color is proving to be more difficult ...

htmlcsstwitter-bootstrap

How can I adjust the gravity or positioning of a tipsy tooltip in jQuery?

Is there a way to adjust the position or gravity of Tipsy? The plugin offers various options for gravity that can be set through the script: nw | n | ne | w | e | sw | s | se Currently, I have set it to s position, as shown in this demo: http://jsfiddle. ...

javascriptjquerycsstipsy

Getting all "li" elements from the "ul" class using Selenium WebDriver is a required task for web scraping or automated testing

As a beginner in Selenium webdriver, I recently encountered a task where I need to automate clicking on all links within a specific section. Could someone provide me with the Java code for this? I have attached an image displaying the Firebug properties of ...

javahtmlseleniumselenium-webdriver

Error loading custom Javascript in MVC 4 view during the first page load

I'm working on an MVC 4 application that utilizes jQuery Mobile. I have my own .JS file where all the functionality is stored. However, when I navigate to a specific view and check the page source, I notice that all scripts files are loaded except fo ...

javascriptjqueryhtmlasp.net-mvcjquery-mobile

Creating a circular frame for your image to use as a Facebook profile picture

In the process of developing an input feature that allows users to upload file images for avatar changes, similar to Facebook's functionality. However, I am aware that Facebook utilizes a circular area for avatars and enables users to adjust the image ...

javascripthtmlcssreactjs

Boosting the specificity of Material UI override styles

I came across a question about Material UI Overriding styles with increased specificity that seemed related to my issue, but I couldn't apply the solution to my problem. My problem involves a vertical Slider with marks, and I am trying to remove the ...

cssreactjsmaterial-ui

I am looking to showcase a series of icons linked together by connecting lines

I have successfully designed the layout and added icons, but I am facing difficulty in creating connecting lines between them. I attempted to utilize CSS borders and pseudo-elements, yet I cannot achieve the desired outcome. If anyone could offer a CSS-ba ...

javascripthtmlcsscss-selectorsweb-frontend

What is the technique for anchoring elements at the top of the page when scrolling?

There is a common design feature where the sidebar on the left starts at a lower position on the page, but as you scroll it moves up to the top and remains fixed in place instead of disappearing off the screen. This is a popular design trend that I have ...

javascriptjquerycsshtmlparallax

Ways to verify if a specific extjs panel has finished loading

After a specific panel has finished loading, I need to insert a JavaScript code (using the panel's ID). What is the best way to ensure that the panel has been fully rendered so that I can access its ID using document.getElementById? Thank you. ...

javascripthtmlextjs

Placing an item inside the container without exceeding its vertical limit

Check out this jsfiddle - http://jsfiddle.net/az47U/3/ - where you'll find a Gallery div along with a Canvas div, both located within the body. These divs have been absolutely positioned to not affect the overall body height. I've set the body he ...

jqueryhtmljquery-ui

What is the best way to show an image on the screen once a submit button is clicked?

I have a hidden loader-bar gif that I want to display when the user submits a form. Here is the code: <p class="loadingImg" style="display:none;"><img src="/design/styles/_shared/classic-loader.gif" alt="" /></p> Is there a way to ...

javascriptjqueryhtmlcss

Sharing $scope Data Between Controller and Directive in AngularJS

Recently, I created a straightforward directive that displays an object: var app = angular.module("myApp", []); app.controller('myCtrl', function($scope) { $scope.users=[ {name:'davidi',age:'23'}, {name:'karen ...

javascripthtmlangularjsangularjs-directive

Exploring the asp.net MVC framework with the integration of HTML5 date input

Currently, I am working on an ASP.NET MVC project using Visual Studio 2013. One of the issues I am encountering is related to a date input field. When I click on the field and focus on it, the automatic HTML5 datepicker does not appear. If I enter the da ...

asp.net-mvchtmldatepicker

Overflowing Collection of Hidden CSS Assets

Here is a unique question. I'm currently implementing some CSS lasers for a futuristic website design: https://codepen.io/jefferymills/pen/xpmDK The code below showcases how to incorporate the lasers using HTML: <div class="laser-beam"></di ...

htmlcssoverflow

JavaScript: Automatically retrieving the if else function

I need help automating the calculation of the number of days a person worked based on their "in-time" and "out-time". I've tried to implement this in my JS code, but it's not working as expected. HTML <fieldset> In-Time: <input clas ...

javascriptphphtml

Although sanitize and raw display HTML tags, Slim remains unaffected

I have a dataset with HTML content that I want to display without any tags. Currently, I am working with Ruby on Rails (RoR) and Slim templates. I've experimented with sanitize, raw, and html_safe, but none of them fully removed all the HTML tags. ...

htmlruby-on-railsslim-lang