DataTables + Bootstrap + FixedHeader

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">
<script src="//cdn.datatables.net/fixedheader/2.1.1/js/dataTables.fixedHeader.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/fixedheader/2.1.1/css/dataTables.fixedHeader.css">
<table id="example" class="display table table-striped table-bordered table-hover" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th colspan=3></th>
            <th colspan=3>234</th>
            <th colspan=3>234</th>
            <th colspan=3>345</th>
            <th colspan=3>34</th>
            <th colspan=3>45</th>
            <th colspan=3>324</th>
            <th colspan=3>45</th>
            <th colspan=3>2</th>
            <th colspan=3>45</th>
            <th colspan=3>234</th>
            <th colspan=3>234</th>
            <th colspan=3>345</th>
            <th colspan=3>34</th>
            <th colspan=3>45</th>
            <th colspan=3>324</th>
            <th colspan=3>45</th>
             
        </tr>

        <tr class="place">
            <th></th>
            <th></th>
            <th></th>
            <th colspan=48></th>            
        </tr>

        <tr>
            <th colspan=3></th>
            <th><p class="rotatehead">Hazmat</p></th>
            <th><p class="rotatehead">Out of Area</p></th>
            <th><p class="rotatehead">Lite</p></th>
            <th><p class="rotatehead">Trip</p></th>
            <th><p class="rotatehead">Out of Area</p></th>
            <th><p class="rotatehead">Spot</p></th>
            <th><p...

CSS

ody {
	font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	color: #333;
	background-color: #fff;
	font-size: 12px;
}


div.container {
	max-width: 980px;
	margin: 0 auto;
}

h1 {
	font-family: 'HelveticaNeue-UltraLight', 'Helvetica Neue UltraLight', 'Raleway', 'Helvetica Neue', Arial, Helvetica, sans-serif;
    font-weight: 100;
    letter-spacing: 1px;
	font-size: 3em;
	line-height: 1em;
}

h1 span {
	font-size: 0.5em;
	line-height: 1em;
}

a {
	cursor: pointer;
	color: #3174c7;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

div.toc ul {
	color: #4E6CA3;
	list-style-type: none;
	padding-left: 0;
}

div.toc li {
	padding: 0.2em 1em;
	border-left: 4px solid transparent;
	border-bottom: 1px solid #e6e6e6;
}

div.toc li.active {
	border-left: 4px solid #458ae0;
}


div.toc li:first-child {
	border-top: 1px solid #efefef;
}

div.toc li:last-child {
	border-bottom: 1px solid #efefef;
}


div.epilogue {
	text-align: center;
}

p.copyright {
	font-size: 0.8em;
	padding-bottom: 2em;
	margin-bottom: 0;
}

.clear {
	clear: both;
	height: 0;
}


div.info {
	margin-bottom: 2em;

	-webkit-column-count: 2;
	   -moz-column-count: 2;
	    -ms-column-count: 2;
	     -o-column-count: 2;
	column-count: 2;


	-webkit-column-rule: 1px solid #F3F3F3;
	   -moz-column-rule: 1px solid #F3F3F3;
	    -ms-column-rule: 1px solid #F3F3F3;
	     -o-column-rule: 1px solid #F3F3F3;
	column-rule: 1px solid #F3F3F3;
}

div.info > * {
	-webkit-column-break-inside: avoid;
	break-inside: avoid;
}

div.info li {
	margin-top: 0.75em;
}

div.info p:first-child {
	margin-top: 0;
}

div.footer {
	position: relative;
	margin-top: 3em;
	border-top: 1px solid #999;
	background-color: #eee;
}

div.footer > div.liner {
	max-width: 960px;
	margin: 0 auto;
}

div.footer > div.gradient {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 6px;

	background: -moz-linear-gradient(top, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 100%); /*...

JavaScript

$(document).ready(function () {
    var table = $('#example').DataTable({
        "bSort": false,
            "paginate": false
    });

    new $.fn.dataTable.FixedHeader(table, {
        "left": true
    });


    $('.filterName').on('click', function (e) {
        e.preventDefault();

        var filterValue = $(this).data('filter');

        table.column(0).data().search(filterValue).draw();
    });

});