CODEWITHSUNDEEP
htmlcssmobilehtml-table
Kevin Murphy
Kevin Murphy

Reputation: 408

Horizontally Scrolling Table

I currently have a web app with a table of data. The issue is, there is so much data in the table that it becomes squished and unreadable on mobile devices. I've noticed that Wikipedia has exactly what I'm going for: http://en.m.wikipedia.org/wiki/Ivy_League#section_1

I'd like to create a table that horizontally scrolls, so that the headers of each cell stay the same, and that the content inside can remain untouched.

Edit: here's the table I currently have: http://honedge.com/94296358

Hasn't really been touched :P

Upvotes: 3

Views: 5456

Answers (3)

Socket
Socket

Reputation: 1

I tried to use the sScrollX but, for some reason, it wasn't working as expected. I solved the issue by wrapping only the table, including the headers (but not the other datatable components) in a div with width and overflow set:

table=$("#example").dataTable();

table.wrap('<div style="overflow: auto; width: ' + 
table.parent().parent().parent().width()*0.95 + 'px"/>');

All table features I tested (sorting, search, number of items to show) was still working.

Upvotes: 0

Mike Robinson
Mike Robinson

Reputation: 25159

As per our discussion up above, something like this should help:

$("#example").dataTable({
  bFilter: false,
  bPaginate: false,
  sScrollX: "100%"
})

Check the full documentation here: http://datatables.net/ref

Upvotes: 2

RhinoWalrus
RhinoWalrus

Reputation: 3089

You should be able to wrap your table in a div with the overflow property set to 'auto', resulting in a scrollable area when the real estate to display the full grid is not there.

Upvotes: 5

Related Questions