Scrolling tables horizontally without wrapping them in div

Question

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!

Answer 1

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.