Unable to scroll horizontally in tr element due to overflow-x issue

I am having an issue with a table that contains a "tr." Within this row, there are several "td" elements and I am trying to enable horizontal scrolling using the "overflow-x: scroll" property but it is not working as expected.

  <tr id="TR_TESTS_BY_CAT" width="100%" height="480px" style="display: none; overflow-x:scroll">
    <td height="530px" valign="top" id="TD_TESTS1" style="width: 25%">
       <div id="divTests1" style="height: 530px; width: 100%; vertical-align: top;">
       </div>
    </td>
    <td>.....</td>

.....

However, despite my efforts, the scrolling functionality isn't working as intended.

htmlcss

Answer №1

overflow does not apply to <TR> elements by nature. TR, with its display property set to table-row, is not a block-level element and therefore does not create a box for overflow content (such as in cases of colspans and rowspans within cells).

Only elements that behave like blocks (display:block | inline-block | list-item) have the concept of overflow, as they possess a designated box where overflow can occur.

Answer №2

To specify specific sizes for your td, you can use the CSS property width:200px;. By doing this, the size of the div containing the content should also be adjusted accordingly to prevent horizontal scrolling.

This method is a workaround solution. For a more optimal approach, consider using <div> instead of tables and avoiding inline CSS. The possibilities with CSS styling are endless!

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

Tips on customizing a row in a table

Having a small issue styling a row in my table. Essentially, the table consists of 4 rows. a) If the data under column Title 5 is below 0, then the entire row should display in red color. b) If the data under column Title 5 is equal to 17, then the compl ...

cssangulartypescriptprimengprimeng-datatable

Locate a row in an unselected data table using Jquery based on the value in a td

Is there an efficient way with jQuery to locate a td in a "legacy" datatable that contains my search value, and then navigate up the row tr? I am currently using $('#modalTable tbody').dataTable()[0].rows to retrieve all rows and then iterate th ...

javascriptjqueryhtmldatatable

Having trouble with HTML code displaying correctly in R leaflet for labels instead of popups

While working with leaflet in R Studio, I encountered an issue when trying to add HTML code to the labels of the icons. Strangely enough, it works for the popups but not for the labels. Below is the code snippet causing the problem: library(leaflet) libr ...

htmlrleaflet

XPath allows for the selection of both links and anchors on a webpage

Currently, I am using Screaming Frog and seeking to utilize XPath for a specific task. My objective is to extract all links and anchors that contain a certain class within the main body content, excluding any links found within div.list. I have attempted ...

htmlxmlxpathweb-scraping

Implement a captivating hover effect on every single element within a particular class

I created a basic website with the following design: However, there is an issue with the hover effect. It only works on the specific area where the mouse pointer is located (here ipsum). My intention was for the hover effect to work on all elements. To fi ...

htmlcss

Enhance your theme property in Styled Components by incorporating numerous style properties

Currently, I am delving into the world of styled components for a fresh project and exploring the theming capabilities it offers. I am finding it challenging to determine the best practice for adding multiple style properties to a single object, essentiall ...

cssreactjsreact-nativestyled-components

How can you use the :not selector in CSS to target specific elements within a group?

Consider the following set of inputs: <div id="group"> <input id="uno" class="red"></input><br/> <input id="dos" class="red"></input><br/> <input id="tres" class="blue"></input><br/ ...

javascriptjqueryhtmlcssselector

Is Selenium Webdrive the superior choice over direct requests?

My goal is to extract verification sentences from Facebook pages using BeautifulSoup. The specific sentence I am looking for is "Verified PageFacebook confirmed this is an authentic Page for this public figure, media company or brand." I tried parsing the ...

pythonhtmlseleniumhtml-parsing

Why won't my sticky element function properly with the position attribute set to sticky?

Hey there! I've been diving into learning all about CSS positions and have nailed down most of them. However, for some reason, the sticky position just won't cooperate and is stubbornly acting like a relative one instead. Check out my HTML snipp ...

htmlcss

Generating an Xpath for the selected element with the help of Javascript or Jquery - here's how!

On my website, I have implemented a click event on an element. When a user clicks on this element, I want to generate the XPath of that particular element starting from either the html or body tag, also known as the Absolute Xpath. For example, if I click ...

javascriptjqueryhtmlxpath

Tips for managing the fixed position property in CSS when dealing with overlapping elements

This image displays the overlap of two divs. One div contains a table with two buttons floating on the right, while the other div features an image. Here, the overlapping issue does not occur. I have detailed my problem with overlapping above and I aim t ...

htmlcssasp.netvisual-web-developer

Automatically resizing a multi-part CSS background based on content dimensions

My current CSS project has hit a snag that I can't seem to solve: There is a box on the left side of the site that contains three images - a top image, an optional and stretched middle image, and a bottom image. I want this left box to automatically ...

htmlcssbackground-image

Utilize AngularJS to compile a roster of participants

Just starting out with AngularJS, and although I have some background in JavaScript, AngularJS seems quite challenging to grasp (at least for me). My current issue is as follows... I have a list of players and I want to allow users (such as coaches or an ...

javascripthtmlangularjsweb-applications

Design a stylish outline for the element <div class="loader">

Initially, I managed to create a border around the body without any issues. However, I encountered a problem when attempting to implement a rotating border animation. In order to achieve this, I had to create a div encompassing all my content. The issue ar ...

htmlcssborder

Tips for customizing CSS for the ValidatorCallout Extender in an ajax tool

I am currently attempting to implement the ValidatorCallout Extender feature from the asp.net Ajax website. However, I am struggling with customizing the CSS for the popup validator. ...

asp.netajaxasp.net-mvccssajaxcontroltoolkit

Center a single div vertically within a parent div by utilizing a fluid layout

Attempting to align text elements within a responsive layout presents challenges due to the fluid nature of <div> sizes. I recently discovered a fantastic method for horizontally and vertically centering a child <div> inside its parent <div ...

htmlcsscenteringfluid-layout

Unable to remove the most recently added Object at the beginning

I am currently working on a project to create a dynamic to-do list. Each task is represented as an object that generates the necessary HTML code and adds itself to a div container. The variable listItemCode holds all the required HTML code for each list it ...

javascriptjqueryhtmlcss

Can Metro style apps be used on iPhone and iPad devices as well as in web applications?

I'm curious to know if I can create a single metro style app using HTML5 and Javascript that will be compatible with both iPhone and iPad? Any assistance would be greatly appreciated! ...

ioshtmlwindows-8windows-runtimewinjs

Transform the text upon hovering over the image, with the text positioned separate from the image

I'm looking for a solution where hovering over images in a grid area will change the text on the left side of the screen to display a predefined description of that image. I've been working on this problem for hours and would appreciate any help. ...

htmlcss

The z-index of the React Apex Chart toolbar menu icon is too high. Is there a way to decrease it?

Is there a way to adjust the z-index value of the icons within React Apexchart's toolbar menu? Even when I position my element at a higher level, they remain on top of it. ...

cssreactjsapexcharts