DataTables example - Scroll - horizontal

DataTables has the ability to show tables with horizontal scrolling, which is very useful for when you have a wide table, but want to constrain it to a limited horizontal display area. To enable x-scrolling simply set the scrollX parameter to be whatever you want the container wrapper's width to be (this should be 100% in almost all cases with the width being constrained by the container element).

The example below shows a table too wide for the containing element with x-scrolling enabled. The CSS option of th, td { white-space: nowrap; } is also set to have the text content of each row on a single line (otherwise the browser will line break the text to have it fit into the available area).

First name Last name Position Office Age Start date Salary Extn. E-mail
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $3,120 5421 [email protected]
Garrett Winters Director Edinburgh 63 2011/07/25 $5,300 8422 [email protected]
Ashton Cox Technical Author San Francisco 66 2009/01/12 $4,800 1562 [email protected]
Cedric Kelly Javascript Developer Edinburgh 22 2012/03/29 $3,600 6224 [email protected]
Jenna Elliott Financial Controller Edinburgh 33 2008/11/28 $5,300 5407 [email protected]
Brielle Williamson Integration Specialist New York 61 2012/12/02 $4,525 4804 [email protected]
Herrod Chandler Sales Assistant San Francisco 59 2012/08/06 $4,080 9608 [email protected]
Rhona Davidson Integration Specialist Edinburgh 55 2010/10/14 $6,730 6200 [email protected]
Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $5,000 2360 [email protected]
Sonya Frost Software Engineer Edinburgh 23 2008/12/13 $3,600 1667 [email protected]
Jena Gaines System Architect London 30 2008/12/19 $5,000 3814 [email protected]
Quinn Flynn Financial Controller Edinburgh 22 2013/03/03 $4,200 9497 [email protected]
Charde Marshall Regional Director San Francisco 36 2008/10/16 $5,300 6741 [email protected]
Haley Kennedy Senior Marketing Designer London 43 2012/12/18 $4,800 3597 [email protected]
Tatyana Fitzpatrick Regional Director London 19 2010/03/17 $2,875 1965 [email protected]
Michael Silva Senior Marketing Designer London 66 2012/11/27 $3,750 1581 [email protected]
Paul Byrd Javascript Developer New York 64 2010/06/09 $5,000 3059 [email protected]
Gloria Little Systems Administrator New York 59 2009/04/10 $3,120 1721 [email protected]
Bradley Greer Software Engineer London 41 2012/10/13 $3,120 2558 [email protected]
Dai Rios System Architect Edinburgh 35 2012/09/26 $4,200 2290 [email protected]
Jenette Caldwell Financial Controller New York 30 2011/09/03 $4,965 1937 [email protected]
Yuri Berry System Architect New York 40 2009/06/25 $3,600 6154 [email protected]
Caesar Vance Technical Author New York 21 2011/12/12 $4,965 8330 [email protected]
Doris Wilder Sales Assistant Edinburgh 23 2010/09/20 $4,965 3023 [email protected]
Angelica Ramos System Architect London 36 2009/10/09 $2,875 5797 [email protected]
Gavin Joyce Developer Edinburgh 42 2010/12/22 $4,525 8822 [email protected]
Jennifer Chang Regional Director London 28 2010/11/14 $4,080 9239 [email protected]
Brenden Wagner Software Engineer San Francisco 18 2011/06/07 $3,750 1314 [email protected]
Ebony Grimes Software Engineer San Francisco 48 2010/03/11 $2,875 2947 [email protected]
Russell Chavez Director Edinburgh 20 2011/08/14 $3,600 8899 [email protected]
Michelle House Integration Specialist Edinburgh 37 2011/06/02 $3,750 2769 [email protected]
Suki Burks Developer London 53 2009/10/22 $2,875 6832 [email protected]
Prescott Bartlett Technical Author London 27 2011/05/07 $6,730 3606 [email protected]
Gavin Cortez Technical Author San Francisco 22 2008/10/26 $6,730 2860 [email protected]
Martena Mccray Integration Specialist Edinburgh 46 2011/03/09 $4,080 8240 [email protected]
Unity Butler Senior Marketing Designer San Francisco 47 2009/12/09 $3,750 5384 [email protected]
Howard Hatfield Financial Controller San Francisco 51 2008/12/16 $4,080 7031 [email protected]
Hope Fuentes Financial Controller San Francisco 41 2010/02/12 $4,200 6318 [email protected]
Vivian Harrell System Architect San Francisco 62 2009/02/14 $4,965 9422 [email protected]
Timothy Mooney Financial Controller London 37 2008/12/11 $4,200 7580 [email protected]
Jackson Bradshaw Director New York 65 2008/09/26 $5,000 1042 [email protected]
Miriam Weiss Support Engineer Edinburgh 64 2011/02/03 $4,965 2120 [email protected]
Bruno Nash Software Engineer London 38 2011/05/03 $4,200 6222 [email protected]
Odessa Jackson Support Engineer Edinburgh 37 2009/08/19 $3,600 9383 [email protected]
Thor Walton Developer New York 61 2013/08/11 $3,600 8327 [email protected]
Finn Camacho Support Engineer San Francisco 47 2009/07/07 $4,800 2927 [email protected]
Elton Baldwin Data Coordinator Edinburgh 64 2012/04/09 $6,730 8352 [email protected]
Zenaida Frank Software Engineer New York 63 2010/01/04 $4,800 7439 [email protected]
Zorita Serrano Software Engineer San Francisco 56 2012/06/01 $5,300 4389 [email protected]
Jennifer Acosta Javascript Developer Edinburgh 43 2013/02/01 $2,875 3431 [email protected]
Cara Stevens Sales Assistant New York 46 2011/12/06 $4,800 3990 [email protected]
Hermione Butler Director London 47 2011/03/21 $4,080 1016 [email protected]
Lael Greer Systems Administrator London 21 2009/02/27 $3,120 6733 [email protected]
Jonas Alexander Developer San Francisco 30 2010/07/14 $5,300 8196 [email protected]
Shad Decker Regional Director Edinburgh 51 2008/11/13 $5,300 6373 [email protected]
Michael Bruce Javascript Developer Edinburgh 29 2011/06/27 $4,080 5384 [email protected]
Donna Snider System Architect New York 27 2011/01/25 $3,120 4226 [email protected]

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { $('#example').dataTable( { "scrollX": true } ); } );

In addition to the above code, the following Javascript library files are loaded for use in this example:

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

th, td { white-space: nowrap; } div.dataTables_wrapper { width: 800px; margin: 0 auto; }

The following CSS library files are loaded for use in this example to provide the styling of the table:

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.