"Unable to get the overflow-x: auto property to function properly

Below is the CSS and HTML code that I am working with:

#container {
  display: table;
  margin: 0 auto;
}
.table-container {
  width: 100%;
  overflow-x: auto;
  _overflow: auto;
}
<div id='container'>
  <div class='table-container'>
    <table>
      <tr>
        <th>Example</th>
      </tr>
      <tr>
        <td>blablablablablablablablablablablablablablablablablablablablablablablablabla</td>
      </tr>
    </table>
  </div>
</div>

I am facing an issue where the overflow-x: auto property is not functioning due to the presence of display: table in the main container. It is crucial for me to retain the display: table property as I require the width of the container div to match the content within it. Is there a way to maintain the functionality of overflow-y while still using display: table in the main container?

htmlcss

Answer №1

Is this the type of solution you need?

UPDATE: It seems like the issue lies in the height settings. You will need to manually define it based on your content. If you are aware of the content, you can set it, if not, JavaScript may be necessary.

    .container {
        display: table;
        width : 100%;
        position: relative;
    }
    .table-container {
        position : absolute;
        left: 0;
        right:0;
        overflow-y: auto;

    }
    #scroller{
        height:100px;
       
    }
<div class='container' id="scroller">
    <div class='table-container'>
        <table>
            <tr>
                <th>Example</th>
            </tr>
            <tr>
                <td>blablablablablablablablablablablablablablablablablablablablablablablablabla</td>
            </tr>
        </table>
    </div>
</div>

<div class='container'>
    <p>
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."


    </p>
</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

Whenever I attempt to execute my .html and .js files, I encounter the error message: "Uncaught SyntaxError: Unexpected token <"

Just starting out in react.js, I decided to include CDN links to compile some basic react.js code into my html. Unfortunately, I encountered this error: "Uncaught SyntaxError: Unexpected token <" I did some research and found a suggestion to add: t ...

htmlreactjsjsx

How can a div be utilized to create a footer with two columns?

Is there a way to design a two-column footer using only divs and no tables? The dimensions of the footer are set at 980px and it needs to include... Copyright 2010 xyz.com (to be placed on the left side) About us | privacy | terms (to be placed on the r ...

cssxhtmlhtml

Tips for preventing tiny separation lines from appearing above and below unordered list elements

I am attempting to utilize twitter bootstrap to create a select-option style list. How can I eliminate the thin separation lines above and below the list of items? Refer to the screenshot: Below is the visible code snippet. It would be best to view the j ...

javascriptjqueryhtmlcsstwitter-bootstrap

Tips for activating an HTML input field using Javascript

I am currently using localStorage to store a string input by the user as a title, which will be saved for future visits. I would like to implement a button that allows the user to delete the displayed text (from localstorage) and enables the input field fo ...

javascripthtml

Arranging elements next to each other in HTML

I'm currently in the process of building my first website as a developer and I could really use some assistance. I'm trying to align two items next to each other horizontally, but since I don't have experience with coding HTML, I'm feel ...

htmlwordpressgoogle-maps

Turn off CSS scroll snapping past a specific threshold

Hey there! I have a total of 7 sections in my layout. The first 4 sections are all CMYK, while the last 3 are RGB. My current challenge is trying to prevent scroll snapping on the RGB sections. The issue arises when I apply scroll-snap-align: start; to t ...

htmlcssscroll-snap

What's the ideal file structure for Codeigniter paired with Angularjs?

Recently, I embarked on a project using Codeigniter and AngularJS for an app. However, I encountered some issues when attempting to use font-awesome offline. After investigating the problem, I concluded that it may be related to the file folder structure ...

phpcssangularjscodeigniterfonts

Encountering an 'undefined' error while attempting to showcase predefined JSON data on an HTML webpage

As I try to display the predefined JSON data from https://www.reddit.com/r/science.json on an HTML page, I keep encountering the message "undefined." Below is a snippet of my HTML code: $.getJSON('https://www.reddit.com/r/science.json', funct ...

javascripthtmljson

Exploring robot framework methods for class verification

Are there any specific keywords in Robot Framework that can be used to verify if an element has a particular class assigned to it? Perhaps something like Element should have class element className Or I could also check if the element has a specifi ...

htmlseleniumtestingtddrobotframework

I have a dynamic blog site that is generated on the fly using Ajax, making the content unsearchable

I have a blog website that is created dynamically using Ajax (XMLHttpRequest) and the HTML History API. One issue I am facing is that my content is not searchable by search engines like Googlebot. I know that Google is now able to analyze such sites, but w ...

javascriptjsonajaxhtmlbrowser-history

Overlapping Image Arrows with CSS Styling

After receiving a design with what appeared to be a simple feature from a designer, I discovered that implementing it was more complex than expected. Specifically, I needed to create a CSS3 arrow with an image as the fill color in order to overlap the unde ...

jqueryhtmlcssslider

Strange behavior of dropdown submenu

I've encountered an issue where my child's ul li elements are not behaving as expected, despite following advice from other sources. After days of debugging with no success, I am unable to pinpoint the problem. The image showcases the issue perfe ...

htmlcss

Tips for adjusting the vertical position of an image within a bootstrap column by a small amount

Apologies in advance if this question has already been addressed, and I am struggling to adapt it to my specific scenario. My objective is to adjust the positioning of the two images shown in the screenshot example below so that they align with the grey b ...

javascripthtmljquerycsstwitter-bootstrap

Issue with FlexSlider 2 and thumbnail slider: Previous and Next buttons not functioning for main image

I have encountered an issue while using FlexSlider 2 with the thumbnail slider. The problem is that the main image does not respond as expected. When I try to navigate using the next/prev buttons, it does not slide or fade to the next/prev image. Even cl ...

javascripthtmlcsscarouselflexslider

"The PHP script was executed despite having a MIME type of "text/html", which is not an appropriate JavaScript MIME type" error

I'm encountering an issue while trying to add data to an Oracle database using PHP from a Bootstrap form. When attempting to run the HTML file in Mozilla Firefox, the following error is displayed: The script from “http://localhost/CustomerPartInAs ...

javascriptphphtmlbootstrap-4

Issue with jQuery draggable appendTo functionality not functioning as expected

Below is the code snippet: JavaScript jQuery $('.dragBox').draggable({ axis: 'y', appendTo: 'parent', containment: [0,0,0,150], start: function() { $(this).addClass('grab ...

jqueryhtmlcssdraggable

Developing a personalized Avada form auto-scrolling algorithm

Our form, created using the Wordpress - Avada theme, needs an autoscroll feature. As users answer questions, the next question appears below, but this is not immediately visible on mobile devices. To address this, we require autoscroll functionality. The ...

javascripthtmljqueryformsautoscroll

Deactivating one div's class upon clicking on another div

Below is the HTML code snippet: <div class="container"> <ul class="navbar"> <li class="nb-link"><a>Home</a></li> <li class="dropdown"> <a>CBSE</a> <ul class="dropdown-menu"&g ...

javascriptjqueryhtmlcss

Exploring the concept of nested arrays in Angular 2 using Typescript

I'm exploring the possibility of defining an array in Angular 2 that contains multiple other arrays within it. To clarify, here's what I had initially: export class PaymentDetails { account: any[]; bpNumber: number; } The issue with t ...

htmlarraysjsonangulartypescript

I have tried using justify-content: center; and align-items: center; to center this div, but the container div is still not centered. How can I successfully center

I am having trouble centering the container in my HTML code HTML code:- <body> <div class="container"> <div class="image"> <img src="./images/image-qr-code.png" alt="qrcode"> & ...

htmlcsswebfrontend