DataTables with % widths + FixedHeader = ok

by xmojmr

HTML

<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<script src="//cdn.datatables.net/plug-ins/e9421181788/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/plug-ins/e9421181788/integration/bootstrap/3/dataTables.bootstrap.css">
<link rel="stylesheet" href="//cdn.datatables.net/fixedheader/2.1.1/css/dataTables.fixedHeader.css">
<script src="http://xmojmr.github.io/component.io/js/dataTables.fixedHeader.js"></script>
<table id="example" class="table table-striped table-bordered hide" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
 
    </table>

CSS

body { font-size: 140%; }
table.dataTable tbody th,
table.dataTable tbody td {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: normal;
}

JavaScript

$(document).ready(function() {
    var data = [
['Tiger Nixon','System Architect','Edinburgh','61','2011/04/25','$320,800'],
['Garrett Winters','Accountant','Tokyo','63','2011/07/25','$170,750'],
['Ashton Cox','Junior Technical Author','San Francisco','66','2009/01/12','$86,000'],
['Cedric Kelly','Senior Javascript Developer','Edinburgh','22','2012/03/29','$433,060'],
['Airi Satou','Accountant','Tokyo','33','2008/11/28','$162,700'],
['Brielle Williamson','Integration Specialist','New York','61','2012/12/02','$372,000'],
['Herrod Chandler','Sales Assistant','San Francisco','59','2012/08/06','$137,500'],
['Rhona Davidson','Integration Specialist','Tokyo','55','2010/10/14','$327,900'],
['Colleen Hurst','Javascript Developer','San Francisco','39','2009/09/15','$205,500'],
['Sonya Frost','Software Engineer','Edinburgh','23','2008/12/13','$103,600'],
['Jena Gaines','Office Manager','London','30','2008/12/19','$90,560'],
['Quinn Flynn','Support Lead','Edinburgh','22','2013/03/03','$342,000'],
['Charde Marshall','Regional Director','San Francisco','36','2008/10/16','$470,600'],
['Haley Kennedy','Senior Marketing Designer','London','43','2012/12/18','$313,500'],
['Tatyana Fitzpatrick','Regional Director','London','19','2010/03/17','$385,750'],
['Michael Silva','Marketing Designer','London','66','2012/11/27','$198,500'],
['Paul Byrd','Chief Financial Officer (CFO)','New York','64','2010/06/09','$725,000'],
['Gloria Little','Systems Administrator','New York','59','2009/04/10','$237,500'],
['Bradley Greer','Software Engineer','London','41','2012/10/13','$132,000'],
['Dai Rios','Personnel Lead','Edinburgh','35','2012/09/26','$217,500'],
['Jenette Caldwell','Development Lead','New York','30','2011/09/03','$345,000'],
['Yuri Berry','Chief Marketing Officer (CMO)','New York','40','2009/06/25','$675,000'],
['Caesar Vance','Pre-Sales Support','New York','21','2011/12/12','$106,450'],
['Doris Wilder','Sales Assistant','Sidney','23','2010/09/20','$85,600'],
['Angelica Ramos','Chief...