File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
​
    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
​
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      <table id="example" class="example-table" cellspacing="0" >
        <thead>
          <tr>
            <th class="object-col">Name</th>
            <th class="wk-col">1</th>
            <th class="wd-col head-col">01.01.</th>
            <th class="wd-col head-col">02.01.</th>
            <th class="wd-col head-col">03.01.</th>
          </tr>
        </thead>
​
        <tbody>
          <tr>
            <td class="object-col">Tiger Nixon</td>
            <td class="wk-col"></td>
            <td class="wd-col"></td>
            <td class="wd-col"></td>
            <td class="wd-col"></td>
          </tr>
          <tr>
            <td class="object-col">Garrett Winters</td>
            <td class="wk-col"></td>
            <td class="wd-col"></td>
            <td class="wd-col"></td>
            <td class="wd-col"></td>
          </tr>
          <tr>
            <td class="object-col">Ashton Cox</td>
            <td class="wk-col"></td>
            <td class="wd-col"></td>
            <td class="wd-col"></td>
            <td class="wd-col"></td>
          </tr>
          <tr>
            <td class="object-col">Cedric Kelly</td>
            <td class="wk-col"></td>
            <td class="wd-col"></td>
            <td class="wd-col"></td>
            <td class="wd-col"></td>
          </tr>
          <tr>
            <td class="object-col">Jenna Elliott</td>
            <td class="wk-col"></td>
            <td class="wd-col"></td>
            <td class="wd-col"></td>
            <td class="wd-col"></td>
          </tr>
          <tr>
            <td class="object-col">Brielle Williamson</td>
            <td class="wk-col"></td>
            <td class="wd-col"></td>
            <td class="wd-col"></td>
            <td class="wd-col"></td>
          </tr>
          <tr>
            <td class="object-col">Herrod Chandler</td>
            <td class="wk-col"></td>
            <td class="wd-col"></td>
            <td class="wd-col"></td>
            <td class="wd-col"></td>
          </tr>
          <tr>
            <td class="object-col">Rhona Davidson</td>
            <td class="wk-col"></td>
            <td class="wd-col"></td>
            <td class="wd-col"></td>
            <td class="wd-col"></td>
          </tr>
          <tr>
            <td class="object-col">Colleen Hurst</td>
            <td class="wk-col"></td>
            <td class="wd-col"></td>
            <td class="wd-col"></td>
            <td class="wd-col"></td>
          </tr>
          <tr>
            <td class="object-col">Sonya Frost</td>
            <td class="wk-col"></td>
            <td class="wd-col"></td>
            <td class="wd-col"></td>
            <td class="wd-col"></td>
          </tr>        
        </tbody>
      </table>
    </div>
  </body>
</html>
CSSSaved
 
body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
​
.container {
  margin-top: 20px;
  margin-left: 20px;
}
​
.example-table {
  table-layout: fixed;
  border-collapse: collapse;     
  /* border-right: 2px solid #d4dbe5;
  border-bottom: 2px solid #d4dbe5;
  border-left: 2px solid #d4dbe5; */
  margin-left: 0px !important;  
}
​
.object-col {
  width: 200px;
  background-color: red;
}
​
.wk-col {
  width: 15px;
  background-color: #F7F7DF;
  border-bottom: 1px solid #F7F7DF;
  font-weight: bold;    
}
​
.wd-col {
  width: 60px;
  border: 1px solid #d4dbe5;
  padding: 2px;
}
​
.head-col {
  background-color: #dfeaf7;
  padding: 2px;
}
​
table.dataTable tbody th, table.dataTable tbody td {
    padding: 0;
}
​
table.dataTable thead th, table.dataTable thead td {
    padding: 0;
    border-bottom: none;
}
​
.dataTables_wrapper.no-footer .dataTables_scrollBody {
    border-bottom: none;
}
JavaScriptSaved
 
$(document).ready( function () {
  var table = $('#example').DataTable( {
                scrollY: '100px',
                scrollX: true,
                scrollCollapse: false,
                paging: false,                
                searching: false,
                info: false,
                ordering: false,                
                columns: [
                { "width" : "200px" },
                { "width" : "15px" },
                { "width" : "60px" },
                { "width" : "60px" },
                { "width" : "60px" },
                ]
    } );
});
​
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers