example.html.haml

%html

  %head
    %title Table Fixed Header
    %meta{content: "text/html; charset=UTF-8", :"http-equiv" => "Content-Type"}
    %script{:src => "jquery-1.7.2.min.js"}
    %link{:href => "bootstrap-2.3.2.css", :rel => "stylesheet"}
    / CSS and JS for table fixed header
    %link{:href => "table-fixed-header.css", :rel => "stylesheet"}
    %script{:src => "table-fixed-header.js"}
    %script{:src => "duplicate_rows.js"}


  %body
    .container
      %h2#mynav | my navigation bar | my navigation bar | my navigation bar | my navigation bar |
      %h1 Table Fixed Header
      %table.table.table-bordered.table-striped.table-fixed-header
        %thead.header
          %tr
            %th{:colspan => 1, :rowspan => 2}
              A title
            %th{:colspan => 3, :rowspan => 1}
              A multicolumn title
            %th{:colspan => 1, :rowspan => 2}
              Comment
          %tr
            %th{:colspan => 1, :rowspan => 1}
              Sub1
            %th{:colspan => 1, :rowspan => 1}
              Sub2
            %th{:colspan => 1, :rowspan => 1}
              Sub3
        %tbody
          %tr
            %td
              Val1
            %td
              Val2
            %td
              Val3
            %td
              Val4
            %td
              Val5
          %tr
            %td{:colspan => 1, :rowspan => 2}
              Bigval
            %td
              Some1
            %td
              Some1
            %td
              Some1
            %td{:colspan => 1, :rowspan => 2}
              This is awesome
          %tr
            %td
              Some2
            %td
              Some2
            %td
              Some2
    %script{:language => "javascript", :type => "text/javascript"}
      $(document).ready(function(){
      $('.table-fixed-header').fixedHeader();
      });