<!DOCTYPE html>
<html>
    <head>
        <link href="//datatables.net/download/build/nightly/jquery.dataTables.css" rel="stylesheet" type="text/css" />
        <link href="//cdn.datatables.net/fixedcolumns/3.0.0/css/dataTables.fixedColumns.css" rel="stylesheet" type="text/css" />
        <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="//datatables.net/download/build/nightly/jquery.dataTables.js"></script>
        <script src="//cdn.datatables.net/fixedcolumns/3.0.0/js/dataTables.fixedColumns.js"></script>
                
        <meta charset=utf-8 />
        <title>DataTables - JS Bin</title>
    </head>
    <body>
        <div class="container">
            <table id="table_id" class="display" cellspacing="0" width="100%">
                    <thead>
                        <!--<tr>
                            <th colspan="2" th align = "left">Information</th>
                            <th colspan="8" th align = "left">Contact</th>
                        </tr>-->
                        <tr>
                            <th>Column 1</th>
                            <th>Column 2</th>
                            <th>column 3</th>
                            <th>Column 4</th>
                            <th>Column 5</th>
                            <th>Column 6</th>
                            <th>Column 7</th>
                            <th>Column 8</th>
                            <th>Column 9</th>
                            <th>Column 10</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Row 1 Data 111</td>
                            <td>Row 1 Data 2111</td>
                            <td>Row 1 Data 3</td>
                            <td>Row 1 Data 4</td>
                            <td>Row 1 Data 5</td>
                            <td>Row 1 Data 6</td>
                            <td>Row 1 Data 7111</td>
                            <td>Row 1 Data 8</td>
                            <td>Row 1 Data 9</td>
                            <td>Row 1 Data 10</td>
                        </tr>
                        <tr>
                            <td>Row 2 Data 111</td>
                            <td>Row 2 Data 2</td>
                            <td>Row 2 Data 3</td>
                            <td>Row 2 Data 4</td>
                            <td>Row 2 Data 5</td>
                            <td>Row 2 Data 6</td>
                            <td>Row 2 Data 7</td>
                            <td>Row 2 Data 8</td>
                            <td>Row 2 Data 9</td>
                            <td>Row 2 Data 10</td>
                        </tr>
                        <tr>
                            <td>Row 3 Data 11</td>
                            <td>Row 3 Data 2</td>
                            <td>Row 3 Data 3</td>
                            <td>Row 3 Data 4</td>
                            <td>Row 3 Data 5</td>
                            <td>Row 3 Data 6</td>
                            <td>Row 3 Data 7</td>
                            <td>Row 3 Data 8</td>
                            <td>Row 3 Data 9</td>
                            <td>Row 3 Data 10</td>
                        </tr>
                        <tr>
                            <td>Row 4 Data 1</td>
                            <td>Row 4 Data 2</td>
                            <td>Row 4 Data 3</td>
                            <td>Row 4 Data 4</td>
                            <td>Row 4 Data 5</td>
                            <td>Row 4 Data 6</td>
                            <td>Row 4 Data 7</td>
                            <td>Row 4 Data 8</td>
                            <td>Row 4 Data 9</td>
                            <td>Row 4 Data 10</td>
                        </tr>
                    </tbody>
                </table>
        </div>
    </body>
</html>
 
body {
    font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    background-color: #fff;
}
div.container {
    min-width: 980px;
    margin: 0 auto;
}
        th, td { white-space: nowrap; }
        div.dataTables_wrapper {
            width: 800px;
            margin: 0 auto;
        }
        tr { height: 50px; }    
 
$(document).ready( function () {
  
  var table = $('#table_id').DataTable({
    scrollX:        true
  });
  
  //$("thead").prepend(" <th colspan=\"2\" align = \"left\">Information</th><th colspan=\"8\" align = \"left\">Contact</th> ");
  $("thead").prepend("<tr><th>Brandon</th></tr>");
  
  /*new $.fn.dataTable.FixedColumns( table , {
    "iLeftColumns":1,
    "sHeightMatch" : "none",
    "iRightColumns": 0
  });*/
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers