Scrolling tables horizontally without wrapping them in div

css, css-tables, html, overflow

Solution

I found this solution but unfortunately it doesn't work in IE, not even IE9.

table {
    max-width: 100%;
    overflow-x: auto;
    display: block;
}

Exaple fiddle

In the end, I think your JS solution would be the best if you want to avoid the hassle of changing the markup in your files.

Problem

I wanted to enable horizontal scrolling on tables in my articles whenever their width exceeds the available width in webpage layout. I tried to achieve this with CSS only, but failed, so I had to wrap all in a div using jQuery: ``` $('table.data').wrap('<div class="tcontain" />'); ``` Then I applied the following CSS: ``` .tcontain { width: 100%; overflow-x: scroll; } ``` This works but I want to avoid JavaScript. Please help!

Original source