The compatibility of IE9 with tables and the use of display: block

Question

The compatibility of IE9 with tables and the use of display: block

When optimizing my site for low-width mobile devices, I adjust the display property of various table elements such as tr, td, and th to block in order to stack them vertically. This technique helps wide tables to show all their content without overflowing from their container.

While this method works well in modern browsers, unfortunately it does not work in IE9. Is there a workaround for this issue?

Check out this jfiddle: http://jsfiddle.net/cfCzD/4/

Below are screenshots for reference:

IE11 (Expected result):

IE9 (Undesired outcome):

html css responsive-design internet-explorer-9 internet-explorer-10

Answer 1

Answer №1

http://codepen.io/abc123/

td {
    width: 80%\9;
    float: right\9;
}

Set a specific width for the table cell and apply floating to it.

Answer 2

http://codepen.io/abc123/

td {
    width: 80%\9;
    float: right\9;
}

Set a specific width for the table cell and apply floating to it.

Answer 3

Answer №2

Here are a couple of helpful resources you might find interesting:

Answer 4

Here are a couple of helpful resources you might find interesting:

Answer 5

Answer №3

If you're struggling with tables, consider using div tags instead

For example:

<div style="display:table">
  <div style="display: table-row">
    <div style="display: table-cell">
      content content
    </div>
    <div style="display: table-cell">
      content content content
    </div>
  </div>
</div>

This approach works well for Internet Explorer 8 and above

Answer 6

If you're struggling with tables, consider using div tags instead

For example:

<div style="display:table">
  <div style="display: table-row">
    <div style="display: table-cell">
      content content
    </div>
    <div style="display: table-cell">
      content content content
    </div>
  </div>
</div>

This approach works well for Internet Explorer 8 and above

The compatibility of IE9 with tables and the use of display: block

Answer №1

http://codepen.io/abc123/

Answer №2

Answer №3

Similar questions

The collapsible section expands upon loading the page

Support for these CSS properties of left: 0; and right: 0; are compatible with

The NgbTypeahead element is not able to scroll when placed within a scrollable container

Select the small image to reveal the larger overlay image

The checkValidity function fails to identify incorrect "tel" input

Resource loading unsuccessful: server returned a 405 status code, indicating method not permitted

Is the `document.documentElement` consistently defined and always representing the HTML element?

Difficulty arises with z-index when hover effects are applied to clip-path shapes

Initiate Bootstrap 4 dropdown menus from the initial menu point

Having trouble navigating to the bottom of a VUEJS app?

Design a personalized button with a hand-shaped image using CSS

When attempting to add a new row to a table, the function fails to function properly

Is the initial carousel element failing to set height to 100% upon loading?

Modify the body tag upon loading the page for Bootstrap 2.0

Is it possible to target a specific element within one of two classes that share the same name using CSS or XPath in Webdriver.IO?

JavaScript code for transitioning between a thumbnail and a full-width image header on a webpage

Google Map with rounded corners that have a transparent design

The "Overall Quantity" of items will vary as it goes through different numerical values, despite the fact that I employed --

What is the best way to fetch and convert information from an API to display on a website?

Don't forget to update the CSS stylesheet whenever templates are rendered in Flask