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 following CSS to tcontain div: width:100%;overflow-x:scroll;

This works but I want to avoid JavaScript. Please help!

It's hard to give you a solution without seeing your markup. Can you post an example fiddle or a link to your site? — omma2289, Jul 21 '13 at 08:12

score 9 · Accepted Answer · answered Jul 21 '13 at 20:15

9

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.

answered Jul 21 '13 at 20:15

omma2289

53,090
8
62
66

1

Thanks! I agree I should keep the JS code. But your solution is best so far. Actually we wanted to enable smartphone users to scroll tables horizontally in narrow responsive design. – Irfanullah Jan Jul 21 '13 at 21:15
Note that you cannot specify any table-related properties for element if you do this because technically it's no longer a table anymore. Spec compliant browsers will create phantom table element between the
element and the ``, `` or ``.
– Mikko Rantalainen Nov 23 '18 at 09:02

score -1 · Answer 2 · answered Jul 21 '13 at 08:06

-1

Give your table width 100%.

table{width: 100%;}

answered Jul 21 '13 at 08:06

Bhojendra Rauniyar

78,842
31
152
211

Thanks! However this stretches small tables. – Irfanullah Jan Jul 21 '13 at 08:42
If you like give width to some value. – Bhojendra Rauniyar Jul 21 '13 at 09:12

Scrolling tables horizontally without wrapping them in div

2 Answers2