Unable to display a horizontal scroll bar

I'm having some trouble with implementing a horizontal scroll feature and can't seem to make it work. If you want to take a look, here is the fiddle

Please provide me with assistance in identifying what mistakes I may be making

edit

Here is the code snippet

<table >
      <tr>
         <td style="width:300px;">
         <div style="width:300px;overflow-x:scroll !important;">
              <table style="width:100:float:left!important;">                          <caption>2011</caption>
                             <td class="top">Brand</td>      
                             <td class="top">Target</td>

                            <tr>
                                 <td>ABC</td>
                                 <td>22</td>

                            </tr>    
              </table>
            <table style="width:100px;float:left!important;">                        <caption>2012</caption>
                             <td>Brand</td>     
                             <td>Target</td>
                             <tr>
                                <td>bnc</td>
                                 <td>22</td>                                
                             </tr>   
             </table>  
<table style="width:100px;float:left!important;">                        <caption>2012</caption>
                             <td>Brand</td>     
                             <td>Target</td>
                             <tr>
                                <td>bnc</td>
                                 <td>22</td>                                
                             </tr>   
             </table> 
<table style="width:100px;float:left!important;">                        <caption>2012</caption>
                             <td>Brand</td>     
                             <td>Target</td>
                             <tr>
                                <td>bnc</td>
                                 <td>22</td>                                
                             </tr>   
             </table>  
<table style="width:100px;float:left!important;">                        <caption>2012</caption>
                             <td>Brand</td>     
                             <td>Target</td>
                             <tr>
                                <td>bnc</td>
                                 <td>22</td>                                
                             </tr>   
             </table>               
        </div>
        </td>          
     </tr>             
</table>  
​

Check out these screenshots showing both the current state and the desired output

htmlcss

Answer №1

To create the desired layout, ensure that the scroll div has a narrower width than the inner table. Here is an example code snippet:

<table style="width:400px">
      <tr>
         <td style="width:300px;">
         <div style="width:300px;overflow-x:scroll !important;">
              <table style="width:350px">
                             <caption>2011</caption>
                             <td class="top">Brand</td>      
                             <td class="top">Target</td>

                            <tr>
                                 <td>ABC</td>
                                 <td>22</td>

                            </tr>    
              </table>
            <table style="width:100px;float:left!important;">
                             <caption>2012</caption>
                             <td>Brand</td>     
                             <td>Target</td>
                             <tr>
                                <td>bnc</td>
                                 <td>22</td>                                
                             </tr>   
             </table>  
<table style="width:100px;float:left!important;">                        
                             <caption>2012</caption>
                             <td>Brand</td>     
                             <td>Target</td>
                             <tr>
                                <td>bnc</td>
                                 <td>22</td>                                
                             </tr>   
             </table> 
<table style="width:100px;float:left!important;">                       
                             <caption>2012</caption>
                             <td>Brand</td>     
                             <td>Target</td>
                             <tr>
                                <td>bnc</td>
                                 <td>22</td>                                
                             </tr>   
             </table>              
        </div>
        </td>          
     </tr>             
</table>  
​

Answer №2

If you want to customize the layout, you can review this fiddle where all tables are floated and an additional DIV is included containing all tables.

Here is the fiddle with the modifications mentioned.

Answer №3

To view the solution on this website: http://jsfiddle.net/ryPdK/8/ make a modification in the following code:

<div style="width:500px">

Adjust the width to a larger value, for example:

<div style="width:9999px">

This will allow the table to accommodate numerous entries and function as desired.

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

Jquery Not Responding to HasChanged Function

I am a beginner and looking for some guidance. I am attempting to develop a single page app using Jquery and AJAX, but unfortunately nothing seems to be working; no errors or any other indication. There are three hyperlinks with hrefs: #/main, #/second, # ...

javascriptjqueryhtmljsonajax

Alter the color of textbox text using JavaScript

I have a text input field. When clicked, I want to change the text color style using JavaScript. Previously, I successfully achieved clearing the inner content of the textbox when clicked and reverting to the default version on blur. This code is currently ...

javascripthtmlcsstextbox

Steps for preventing form submission when the username is unavailable

After checking the availability of the user name, I encountered an issue where the form still gets submitted even if the username is not available. Updated Code: <SCRIPT type="text/javascript"> $(document).ready(function(){ $("#emailch").change(fu ...

phpjavascriptjqueryhtmlajax

Invoke a PHP function from a class located in a separate file using an HTML button

I have an HTML input form with a SAVE button at the end. I want the SAVE button to trigger a PHP function written in a separate class file. The PHP code at the beginning of the file nabava_vnos.php that contains the HTML form: <?php // Script for sta ...

phphtmlbutton

The minified version of Bootstrap's CSS will only be loaded when I explicitly import it in my index

I used to rely on BootstrapCDN for my styles, but now I want to download the files and use them locally. However, when I try to load the styles without an internet connection, they don't seem to work properly, especially the grid layout. My current s ...

htmlcssreactjsbootstrap-4

Tips for activating a sticky navigation button by scrolling down slightly

Currently in the process of developing a website using React and focusing on optimizing the mobile version first. One feature I am working on is to have a sticky navigation bar that remains at the top after scrolling down. In the attached picture, there is ...

htmlcssreactjs

What is the best way to navigate back to the main view once a dialog has been opened

I am working on a web application with two HTML pages. On the second page, I have implemented a dialog using CSS only, without any JavaScript. The first page contains a single button: <button onClick="redirectToDetails()">Go to details</button&g ...

javascripthtml

Issue with fixed header in Vuetify v-data-table not functional

While working with the Vuetify v-data-table component, I have enabled the fixed-header property. However, I have noticed that the table header is scrolling along with the table body. I am using the latest version of Chrome. Does anyone know how to addres ...

htmlcssvue.jsvuejs2vuetify.js

Adjusting SVG size based on the position of the cursor for transforming origin

My goal is to scale an SVG circle using the trackpad (by moving two fingers up and down), with the origin of the transform being the cursor position. Initially, the scaling works as intended, but on subsequent attempts, the circle changes position, which s ...

javascripthtmlcsssvgcss-transforms

Guide on how to append input field data to a table using jQuery

My current project involves working with a table, and I have encountered some challenges along the way. Typically, I have 4 input fields where I can input data that is then sent to the table in my view. However, if I exceed 4 values and need to add more, I ...

javascriptjqueryhtmlcss

Mysterious attributes of angular 6's <table mat-table> tag

This particular question regarding the angular material table has not been duplicated in any other discussions. Other similar questions pertain to angular versions 2-5, not version 6 The issue I am encountering is as follows: Can't bind to 'dat ...

htmlangulartypescriptangular-material

Enhancing functionality through interactive buttons: optimizing the performance of this dynamic data code

I am seeking a more efficient way to retrieve names from a database using PHP and MySQL. Currently, I have multiple if isset statements in my code, one for each button that retrieves a specific name. Is there a better approach to achieve the same result ...

phphtmlmysql

Printing doesn't display CSS styling

I am currently working on creating a function to change the font color, however, I am facing issues with the CSS when it comes to printing. Here is the code I have: $('#draw').on('click', 'p', function () { if($(this).ha ...

javascriptjqueryhtmlcss

Executing JavaScript function from external SVG file globally

I am working on an HTML page that includes an external JavaScript module <script type="text/javascript" src="js/js.js"></script> and also an external SVG map called "img/map.svg". My goal is to create clickable objects on the map that will t ...

javascriptjqueryhtmlsvg

Dynamic div positioned over image

Is there a way to create a responsive div on top of a responsive image? I'm having trouble getting the div to fully align with the image in my code. Can anyone offer assistance? Check out the codePen here HTML Code: <div class="container-fluid ...

htmlcsstwitter-bootstrap

Comparing currency to double in handlebars: a comprehensive guide

I've been working with Handlebars.js and encountered an issue when trying to compare product prices above $35. The problem arises from the fact that prices are stored as "$54.99" which gets treated as 0 when compared to a number. How can I effectively ...

htmlcsshandlebars.jsbigcommerce

top margin is functioning properly in Internet Explorer, but not in Google Chrome

margin-top is behaving differently in IE compared to Google Chrome. Two menus are supposed to be displayed one above the other in my design. The issue lies in the line margin-top:30%; within .anothermenu ul. In Chrome, the second menu appears above the f ...

javascriptjqueryhtmlcss

Enhancing password security with an Ajax form field

Looking for an ajax/javascript plugin that adds color indicators next to password fields, with each password having its own unique color combination. ...

htmlajaxpasswordbox

The modal is functioning properly on Firefox and Internet Explorer, but it is experiencing issues

Having an issue with my modal not functioning properly in Chrome. When I click on it, only the background fades and both the before and after content load in the Chrome Dev tools simultaneously with no visible content in between. Here is a link to the Cod ...

javascriptcssmodal-dialog

Easy PHP navigation options

Creating a basic PHP page with includes is proving challenging when it comes to navigating URLs using '../' to find the correct path to the folder. Is there a straightforward way to set up a simple PHP navigation without involving MySQL or other ...

phphtml