Internet Explorer fails to account for the height of table cells when using overflow-x:auto, leading to hidden content. In contrast, Chrome adjusts for this automatically. What steps can be taken to address

Chrome:

https://i.sstatic.net/bzgOT.jpg

Internet Explorer:

https://i.sstatic.net/qHH1r.jpg The image at the top shows how the content should appear on Chrome, while the one below demonstrates how it is displayed on IE11. The issue seems to be that on Internet Explorer, the content gets hidden and doesn't adjust properly for the vertical scroll bar. Is there a way to resolve this problem? This snippet of code reflects what I've implemented so far:

td {
    white-space: nowrap;
    overflow-x: auto;
}

Note: Apologies for any confusion in formatting the images. The second image starts from where it says Aimee Reedy - Fredericka McGee - 10/17/16 for the second time.

htmlcssinternet-explorer

Answer №1

If you want your code to work seamlessly in both Chrome and IE10+, try using the following CSS:

td {
  text-align:left;
  color:blue;
  white-space:nowrap;
  max-width:200px;
  overflow-x:auto;
}

th{
  text-align:left;
}

@media all and (-ms-high-contrast:none)
{
  .padding{overflow-y:hidden;}
}
<table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Description</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Emma Stone</td>
        <td>Hot Woman</td>
      </tr>
      <tr>
        <td>Shia Labeouf</td>
        <td><div class = "padding">
        Crazy, Crazy, Crazy, Crazy, Crazy, Crazy, Crazy, Crazy, Crazy, Crazy, Crazy, Crazy, Crazy, Crazy, Crazy, Crazy, Crazy, Crazy, Crazy, Crazy, Crazy, Crazy, Crazy, Crazy, Crazy, Crazy, Crazy, Crazy, Crazy, Crazy, Crazy, Crazy, Crazy, Crazy, Crazy, Crazy
        </div></td>
      </tr>
    </tbody>
</table>

Answer №2

The issue you are encountering arises from attempting to utilize a block element within a container designed for a table-cell. As Kashif points out in his response, the recommended approach is to insert a div container and apply the overflow scroll on that particular element (which provides a more organized solution).

Another method to address this issue would involve converting your td and th elements to employ an inline-block along with the width properties. However, one downside of using this technique is the elimination of the table cell element, which somewhat undermines the purpose of utilizing a table initially.

td, th {
  display: inline-block;
  text-align:left;
  color:blue;
  white-space:nowrap;
  max-width:200px;
  overflow-x:auto;
  border: 1px solid red;
  border-collapse: collapse;
  width: 49%;
}

For reference, here is the link to your fiddle containing the code. Apologies for the disorganization; I have not had the chance to thoroughly refine it, but it should give you a general idea. Hopefully, this information proves useful.

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

Floating elements are misaligned and not laying out correctly

I've encountered an issue where the footer div is appearing behind the right-hand side div. I have a central container div with two floated divs next to each other, and the footer is separate. I've spent hours trying to fix it but can't figu ...

htmlcsscss-float

Displaying or concealing HTML elements using AngularJS while a modal is open

Looking for a way to display a loading spinner icon on my page when a user triggers a button that opens a modal, and then have the spinner disappear once the modal is open and its content has loaded. Currently, I've managed to make the spinner show up ...

javascripthtmlangularjs

When the browser screen is minimized, the menu bar toggler in my Angular project stops functioning properly. I rely on Bootstrap features within Angular to handle this

When the browser is at full-screen mode, HTML works perfectly. However, when I resize the browser to a smaller size, the navbar disappears and a toggle is shown - which is the expected behavior. If I click on the toggle, the menu list should be displayed ...

angularhtmlbootstrap-4

Why doesn't the div click event trigger when the mouse hovers over an iframe?

My dilemma involves a div element with a click event. When the div is positioned over an iframe area (closer to the user than the iframe), the click event fails to trigger. However, if the div is located elsewhere and not above the iframe, the click event ...

javascriptjqueryhtmlcssiframe

Executing npm run build index.html results in a blank page being generated without any error messages or warnings

After building my react app with npm run build, I encountered a problem where clicking on index.html resulted in a blank page opening in the web browser. I explored several solutions to address this issue but none seemed to work. Some of the strategies I ...

javascripthtmlreactjsnpm

The header row in HTML tables sometimes vanishes unexpectedly after sorting the table

Upon filtering the table, I noticed that the header disappears sporadically. The issue is that the table header row should remain in place regardless of whether or not the characters used for filtering are present in the table rows. In Example 1: When fil ...

javascripthtmlpython-3.xchar

Utilizing PHP and AJAX to Extract Information from a MySQL Database

My goal is to fetch data from a MySQL database hosted on a webserver and display it in an HTML table. I've been following an example on W3Schools, but I'm facing issues retrieving the data successfully. Here is the source code: (HTML) <html& ...

javascriptphphtmlmysqlajax

What could be causing the menu to not align in the center?

Take a look at the HTML code below: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="v ...

htmlcssbootstrap-5

Writing and altering content within the <code> element in Chrome is unreliable

Utilizing a WYSIWYG Editor with contenteditable functionality allows users to input "code snippets" using a <code> element. Here is an example: <div contenteditable="true"> <p> This is a paragraph with an <code>inline s ...

javascripthtmlcsscontenteditable

Guidelines for attaching a div to the bottom of a page?

I have a navigation menu inside div.wrapper, and I am trying to make the div.wrapper stick to the footer. <div class="wrapper"> <div id="menu"> <ul> <li>1.</li> <li>2.</li> ...

javascriptjquerycsshtml

Add CSS properties to child elements that are not of a specific selector, while styling their descendants without any restrictions

Seeking assistance for an Angular application, but the query also pertains to CSS principles in general. In my Angular project, I have a main component containing several child components, all with standard view encapsulation. Specifically, I am looking t ...

cssangularsass

Updating HTML in Vue.js with data at a specific index value can be done by targeting

Experimenting with a combination of vue.js and vanilla to create a blackjack game. The card data is stored in the vue data() like this: data(){ return { cards: [ {id: 1, cardName: 'Ace of Spades', cardPic: ' ...

javascripthtmlvue.js

Creating a stylish menu with CSS and Bootstrap featuring two beautifully designed rows

Looking to design a header for a webpage that features a logo on the left side in the center, along with two rows of menu items positioned on the right using CSS and Bootstrap classes. Below is an example layout: ---------------------------------------- ...

htmlcsstwitter-bootstrap

How come jQuery won't let me activate the 'change' event on a radio button?

Click the link below to access the page: Below are the original javascript codes that are functioning correctly: $(document).ready(function(){ $(".open_gene").on('change', function(event) { $('#Gene_field').show(); }); ...

javascriptjqueryhtml

Turn off transparency for the child element if the parent element has transparency

In my design setup, there is a container with an opacity set at 0.8. This allows the background image to subtly shine through the content area. The challenge arises when I place a client photo inside this container. The issue is that the photo's opac ...

htmlcss

Is it possible to successfully pass a parameter from a servlet to a JavaScript function, but encounter issues when trying to view the database

In my view servlet, I am displaying user data from the database in a table. Each row of the table has buttons that allow users to change the cells in that row to text boxes. The issue I am encountering is that when I retrieve the data and loop through to ...

javascripthtmlservletsdom-events

Generate a variety of HTML ordered lists

Can anyone assist me in determining the type of ordered list shown below? What is the method to achieve an ordered list like this: (a) (b) (c) in HTML? ...

htmlcss

The for loop does not cycle through every element

I'm working on a class project that involves creating custom HTML tags with JavaScript. I have a for loop set up to iterate over each use of the tag, but for some reason, it only seems to loop over every other tag. I'm specifically trying to crea ...

javascripthtml

The main div element is experiencing an overflow due to the excessive

I am struggling to create a homepage layout with three columns of varying heights within the 'content' division. The columns keep overflowing onto the content below, causing layout issues. I have attempted using positioning to solve this problem ...

csshtml

Doesn't the .stop(true) function completely clear the queue as it should?

My slideshow has a hover function to pause it using .stop(true). Upon mouse exit, it should resume playing from where it left off. However, currently, when I hover over it, the animation stops and then continues until it reaches its target, pausing there a ...

javascriptjqueryhtmlcss