"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

Is there a way to convert HTML into a structured DOM tree while considering its original source location?

I am currently developing a user script that is designed to operate on https://example.net. This script executes fetch requests for HTML documents from https://example.com, with the intention of parsing them into HTML DOM trees. The challenge I face arise ...

javascripthtmldomparser

Styling tables within HTML emails for Gmail and then utilizing PHPMailer to send the emails

I've been racking my brain over this for hours with no luck! Objective: Implementing inline styles for table, td, th, p elements in an HTML email intended for Gmail using PHPMailer. Challenge: Inline styles not being rendered HTML Snippet: <sec ...

javascriptphphtmlcssemail

Vertical Alignment of Navigation Bar in Bootstrap 4

I am trying to align the center of my navigation bar using the "Cover" Bootstrap 4 template. Please find the current code provided below. <div class="cover-container d-flex h-100 p-3 mx-auto flex-column"> <header class="masthead mb-auto"> ...

htmlcssbootstrap-4navbarcenter

What are some techniques for highlighting the significance of specific items within an unorganized list?

My goal is to utilize semantic markup to highlight the importance or priority of each item. Let me illustrate what I mean with an example. <ul itemscope itemtype="http://schema.org/ItemList"> <h2 itemprop="name">Wish List</h2><br&g ...

htmlsemanticsschema.orgmicroformats

Position text input boxes on the right side of the div element

I am seeking help with aligning the text inputs to the edge of .formColumn2 so they appear in a neat line together. I have attempted using margin-right:0 and margin-left, but these solutions end up extending the .formColumn2 div which is not my desired out ...

htmlcssformstextinput

Greetings! I am interested in injecting HTML elements into a DOM using PHP and the jQuery Ajax method

After trying the following code snippet: $.ajax({ url: 'cod.php', type: 'POST', dataType: 'html', success: function(res){ $("#tests").html(res); } I implemented a foreach loop in my PHP s ...

phpjqueryhtmlajax

Creating unique styles with styled components without the use of selectors

Is it possible to achieve contextual styling without using CSS selectors? For example: <Button primary> <Text>BUTTON</Text> // if the button is primary then have 20px padding else 0 <Icon/> // if the button is primary then ...

cssreactjsreact-nativestyled-components

Is your data coming in as NaN?

I am currently developing a basic webpage that has the capability to calculate your stake and determine your return, reminiscent of a traditional betting shop. As of now, I have successfully hard coded the odds into my page. However, while testing my code ...

javascriptjqueryhtmljson

Issues with styling classes using global SCSS in React are causing unexpected behavior

Currently, I am working on a React project that includes the use of SASS for styling purposes. While implementing modular CSS in my components, I have encountered an issue with applying styles from a main.scss file in my Layout.js component. The unique a ...

cssreactjssassselectornext.js

Adjust the child element's value by referencing the parent class name

I need to update the content of child elements within an HTML file based on the class name of their parent element, using JavaScript. While I have successfully achieved this for static values by creating a TreeWalker for text nodes, doing the same for dyn ...

javascripthtmlelement

Incorporating information collected from a modal form into a table using vue.js

insert code hereThis single page application allows users to input data into a modal, which is then automatically added to a table on the main page. var modal = document.getElementById('modalAdd'); var modalBtn = document.getElementById(' ...

javascripthtmlvue.js

CSS - Make the entire div clickable while leaving a specific area non-clickable

I have a block containing some information. Within this div is a hidden button labeled .remove. Clicking on the main block will take you to another page, while hovering over the div will reveal the button. However, clicking the button also navigates you aw ...

jqueryhtmlcss

Personalizing/Concealing Navigation Controls

Looking for a way to customize the Navigation in the Pagination Plugin; changing 'First, Prev, Page 1, Page 2, Next, Last' to 'Prev, Next, Page 1 of 2' The documentation suggests using show_first_last set to false to hide 'First/L ...

javascriptjqueryhtmlcss

Discover the sleek and modern concept of transparency in Microsoft's

I'm interested in incorporating Microsoft Fluent Design transparency into my webpage. Are there any CSS or other tools that can help achieve this design language? I want to enhance the look of my site with these elements. ...

transparencyhtmlweb-platformsfluent-design

Tips for eliminating double quotes from an input string

I am currently developing an input for a website that will generate a div tag along with its necessary child elements to ensure the website functions correctly. I have a couple of key questions regarding this setup: <!DOCTYPE html> <html> < ...

javascriptjqueryhtml

Avoid placing the label within a form-inline in Bootstrap to maintain proper formatting and alignment

I am working on a form where I have two fields inline within a form-inline div. I am looking to move the labels of these fields above them rather than next to them. How can I achieve this without affecting the layout of the fields? Here is a CodePen link ...

htmlcssbootstrap-4

What could be causing my Material UI Table to disappear when I toggle the "Show" option?

I am incorporating the Grow material ui component to display or hide a table. Initially, the table is visible. <Box className={classes.object_controls_wrapper}> <Box sx={{ display: "flex" }}> <Grow in={objectViewOpened ...

cssreactjsmaterial-uimaterial-table

In the event of a 404 error, simply direct the user to the pageNotFound before ultimately guiding them back

I'm developing a website with Node JS and I want to implement a feature where if the user attempts to navigate to a non-existent page, they are redirected to a "Page Not Found" message before being automatically taken back to the home page after a few ...

javascripthtmlnode.jsejs

Is it necessary to adjust my font stack for optimal viewing on a high DPI tablet or computer screen?

My CSS includes the following font definition: html { font-size: 95%; font-family: Arial, Helvetica, sans-serif } I want my application to display well on PC, iOS, and Android tablets. I am aware that different devices have varying resolutions. C ...

androidhtmlioscssfont-size

The unique GopikaTwo Gujarati font is unfortunately not compatible with Android mobile browsers and hybrid applications

I am currently trying to incorporate the custom font GopikaTwo into my hybrid application. Below is the code snippet I have added to my CSS file: @font-face { font-family: 'GopikaTwo' !important; src: url('GopikaTwo.eot') !impo ...

androidcssfont-faceandroid-browsercustom-font