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

How to retrieve an element in jQuery without using the onclick event listener

I'm looking to extract the element id or data attribute of an HTML input element without using the onclick event handler. Here is the code I currently have: <button class="button primary" type="button" onclick="add_poll_answers(30)">Submit</ ...

javascriptjqueryhtmlajaxonclick

Adjust the vertical positioning according to the percentage of the width

Currently, I am attempting to modify the position of my navigation bar on the screen in relation to the screen width rather than the height. I previously attempted using top: 10% in CSS, but realized this is based on the screen's height instead of its ...

htmlcss

Problem with <meta> tag occurring when initial-scale is adjusted

Initially, in the index.html file: <meta name="viewport" content="width=device-width, initial-scale=1" /> I decided to modify it to: <meta name="viewport" content="width=device-width, initial-scale=2" /> ...

javascripthtmlcssreactjsmeta-tags

Tips for adjusting the close date based on the selected date in a dropdown datepicker

Here is a sample code snippet: <input id="date1" name="start_date" id="dpd1"/> <select class="form_line_only form-control" name="ho_night"> <option selected> 0 </option> <option ...

javascriptjqueryhtmldatepicker

Passing data from the <ion-content> element to the <ion-footer> element within a single HTML file using Ionic 2

In my Ionic 2 html page, I have a setup where ion-slide elements are generated using *ngFor. I am seeking a way to transfer the data from ngFor to the footer section within the same page. <ion-content> <ion-slides> <ion-slide *n ...

htmlangularionic2angularjs-interpolate

When attempting to add a new row to a table, the function fails to function properly

I am facing an issue with my dynamic HTML table. Each row in the table should have two cells whose values are multiplied together. I have created a function to achieve this, but it only works on the first row of the table and not on any new rows added by c ...

javascriptjqueryhtml

Eliminate viewed alerts by implementing a scrolling feature with the help of Jquery, Javascript, and PHP

My goal is to clear or remove notifications based on user scrolling. The idea is to clear the notification once the user has seen it, specifically in a pop-up window for notifications. I am relatively new to Javascript/jQuery and feeling a bit confused abo ...

javascriptphpjquerycsswordpress

Alternate Row Colors Using Odd/Even CSS Styling for Main Headings

In my expand/collapse table, I have set up alternating row colors (dark grey and light grey) that adjust automatically when expanding or collapsing. The challenge I'm facing is that for certain rows, I want to apply a specific background color using ...

javascriptjquerycsshtml-table

Apply CSS styles to the checkbox

I am new to CSS and I need help styling a checkbox element. When the user selects one of the checkboxes, I want the background color to change to yellow. Thank you for any assistance you can provide! .radio_toggle { float:left; } .radio_toggle label ...

htmlcsscheckbox

Implementing a CSS codepen within a React Material-UI component

I'm struggling to implement this effect on my material ui card component using react and makeStyles. I am having difficulty translating this effect to the cards, could someone assist me in simplifying it into a CSS code that can be used in MakeStyles? ...

cssreactjsmaterial-uicodepen

I am looking to transmit information from flask to React and dynamically generate HTML content based on it

index.py @app.route('/visuals', methods=["GET", "POST"]) def visuals(): global visclass return render_template('visframe.html', images=visclass.get_visuals()) visframe.html <div id='gallery'></div> { ...

javascripthtmlreactjsflaskreact-fullstack

What could be causing the discrepancy in sizes of the columns in my multi-column layout?

https://jsfiddle.net/drqjmssy/ Seeking assistance from the linked jsfiddle, I aim to align "div class='main_content'" vertically with "div class='sidebar'". What would be the best approach to achieve this alignment? In case the fiddle ...

htmlcss

The concept of CSS inheritance within div elements

I've been researching extensively about the concept of CSS inheritance, but I have come across a puzzling question that remains unanswered. Consider the code snippet below: <!DOCTYPE HTML> <html> <head> <style type="text/css"> ...

csshtmlinheritance

How to target the following element with CSS that has a specified class name

Would it be possible to achieve this using CSS alone, or would I need to resort to jQuery? This is how my code currently looks: <tr>...</tr> <tr>...</tr> <tr>...</tr> <tr class="some-class">...</tr> // My g ...

jquerycssselector

Tips for maintaining an open ng-multiselect-dropdown at all times

https://www.npmjs.com/package/ng-multiselect-dropdown I have integrated the ng multiselect dropdown in my Angular project and I am facing an issue where I want to keep it always open. I attempted using the defaultOpen option but it closes automatically. ...

htmlangulartypescriptng-multiselect-dropdown

Using Jquery Chosen Plugin to Dynamically Populate One Chosen Selection Based on Another

Good evening to all, please excuse any errors in my English. I have successfully integrated a jQuery Chosen plugin with my 'estado' field (or province). My goal is to populate another jQuery Chosen plugin with the cities corresponding to that s ...

javascriptjqueryhtmlajaxjquery-chosen

Can you tell me the CSS equivalent of the SASS/SCSS expression "&$"?

Hey there! I've been diving into the world of Material-UI components and stumbled upon this interesting styling snippet: root: (0, _extends3.default)({}, theme.typography.subheading, { height: theme.spacing.unit * 3, boxSizing: 'content- ...

cssreactjssassmaterial-ui

Conceal an absolutely positioned element outside its relatively positioned parent

I have a relative position parent element, <div style="position:relative" id="a"> and within that div, I'm creating some absolute positioned elements using jQuery, <div style="position:absolute;right:0" id="b"> These elements are anima ...

javascriptjqueryhtmlcss

CSS guidelines for layering shapes and divs

Currently, I am in the process of developing a screenshot application to enhance my understanding of HTML, CSS, and Electron. One of the key features I have implemented is a toggleable overlay consisting of a 0.25 opacity transparent box that covers the en ...

javascripthtmlcsselectron

Fullscreen overlay or pop-up display

I have a website with images and iframes displayed within a fancybox. Everything is functioning properly, but now the website's requirement is to have a fullscreen overlay like on the usatoday website. Take a look at for reference. When clicking on ...

jqueryhtmlcss