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="http://cdn.datatables.net/fixedheader/3.1.1/js/dataTables.fixedHeader.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/fixedheader/3.1.1/css/fixedHeader.bootstrap.css">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="/"><img src="/img/zf2-logo.png" alt="Zend Framework 2"/>&nbsp;Skeleton Application</a>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="/">Home</a></li>
                    </ul>
                </div><!--/.nav-collapse -->
            </div>
        </nav>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">                
                    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
  ...

CSS

body {
    padding-top: 60px;
    padding-bottom: 40px;
}

.zf-green {
    color: #68b604;
}

.btn-success {
    background-color: #57a900;
    background-image: -moz-linear-gradient(top, #70d900, #57a900);
    background-image: -ms-linear-gradient(top, #70d900, #57a900);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#70d900), to(#57a900));
    background-image: -webkit-linear-gradient(top, #70d900, #57a900);
    background-image: -o-linear-gradient(top, #70d900, #57a900);
    background-image: linear-gradient(top, #70d900, #57a900);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#70d900', endColorstr='#57a900', GradientType=0);
}

.btn-success:hover,
.btn-success:active,
.btn-success.active,
.btn-success.disabled,
.btn-success[disabled] {
    background-color: #57a900;
}

.btn-success:active, .btn-success.active {
    background-color: #57a900;
}

div.container a.brand {
    background: url("../img/zf2-logo.png") no-repeat scroll 0 10px transparent;
    margin-left: 0;
    padding: 8px 20px 12px 40px;
}

.column-rbe-icon{
    display:block;
    text-align:center
}

/*datatables editor radio form styles */
div.DTE_Field_Type_radio div.DTE_Field_InputControl > div > div {
    display: inline-block;
    margin-right: 8px;
}

a.url-maps {
    font-size: 12px;
}

JavaScript

$(document).ready(function() {
    var table = $('#example').DataTable();
    console.log( $('nav').height() );
    new $.fn.dataTable.FixedHeader( table, {
        header: true,
        headerOffset: $('nav').height()
    });
} );