显示固定标题的背景

Question

I try to create a fixed table-header with the following code from this question , but with checkboxes and they don't display properly. It works on fiddle example but I'm using Symfony3 and Twig, so it's possible that's causing the problem.

How can I solve this?

 permissionFixed: function() { $.fn.fixMe = function() { return this.each(function() { var $this = $(this), $t_fixed; function init() { $t_fixed = $this.clone(); $t_fixed.find("tbody").remove().end().addClass("fixed").insertBefore($this); resizeFixed(); } function resizeFixed() { $t_fixed.find("th").each(function(index) { $(this).css("width", $this.find("th").eq(index).outerWidth() + "px"); }); } function scrollFixed() { var offset = $(this).scrollTop(), tableOffsetTop = $this.offset().top, tableOffsetBottom = tableOffsetTop + $this.height() - $this.find("thead").height(); if (offset < tableOffsetTop || offset > tableOffsetBottom) $t_fixed.hide(); else if (offset >= tableOffsetTop && offset <= tableOffsetBottom && $t_fixed.is(":hidden")) $t_fixed.show(); } $(window).resize(resizeFixed); $(window).scroll(scrollFixed); init(); }); }; } 

 .fixed { top: 0; position: fixed; width: auto; display: none; border: none; } .permissionsFixedTHead thead { background-color: red; z-index: 10; color: white; } 

 <table class="permissionsFixedTHead table table-bordered permissions"> <thead> {% if form_errors(form.permissions) %} <tr> <td class="has-error" colspan="7">{{ form_errors(form.permissions) }}</td> </tr> {% endif %} <tr> <th>Section</th> <th>Route</th> {% for operation in operations %} <th> <label for="{{ operation }}CheckboxAll"> <input type="checkbox" id="{{ operation }}CheckboxAll" data-method="{{ operation == 'update' ? 'put':'' }}"/> {{ operation|capitalize }} </label> </th> {% endfor %} </tr> </thead> <tbody> {% for permission in permissions %} {% for route in permission.routes %} <tr> {% if loop.first %} <td rowspan="{{ permission.routes|length }}" style="vertical-align: middle;">{{ permission.section }}</td> {% endif %} <td>{{ route.name }}</td> {% for crud, operation in route.operations %} <td class="text-center"> {% if operation is not empty %} <label class="checkbox"> <input type="checkbox" class="checkbox-{{ crud }}" id="{{ "%s_%s_%s"|format(crud, operation.action, operation.id) }}" name="role[permissions][]" value="{{ operation.id }}" {{ operation.id in form.permissions.vars.value ? 'checked' : null }} data-method="{{ operation.method }}"> </label> {% endif %} </td> {% endfor %} </tr> {% endfor %} {% endfor %} </tbody> </table> 

Answer 1

The simle way to fixed the header of table, when your table has a fixed width and fixed layout only css, like in this example:

Note: if any cell must be larger as others use colspan

 table{ width:550px; table-layout: fixed; } td{ padding:8px } .container{ height:162px; overflow:auto } 

 <table border=1> <tr> <td>Col1</td> <td>Col2</td> <td colspan=2>Col3</td> <td>Col4</td> <td>Col5</td> <td>Col6</td> </tr> </table> <div class="container"> <table border=1> <tr> <td>info</td> <td>info</td> <td colspan=2>info</td> <td>info</td> <td>info</td> <td>info</td> </tr> <tr> <td>info</td> <td>info</td> <td colspan=2>info</td> <td>info</td> <td>info</td> <td>info</td> </tr> <tr> <td>info</td> <td>info</td> <td colspan=2>info</td> <td>info</td> <td>info</td> <td>info</td> </tr> <tr> <td>info</td> <td>info</td> <td colspan=2>info</td> <td>info</td> <td>info</td> <td>info</td> </tr> <tr> <td>info</td> <td>info</td> <td colspan=2>info</td> <td>info</td> <td>info</td> <td>info</td> </tr> <tr> <td>info</td> <td>info</td> <td colspan=2>info</td> <td>info</td> <td>info</td> <td>info</td> </tr> <tr> <td>info</td> <td>info</td> <td colspan=2>info</td> <td>info</td> <td>info</td> <td>info</td> </tr> <tr> <td>info</td> <td>info</td> <td colspan=2>info</td> <td>info</td> <td>info</td> <td>info</td> </tr> <tr> <td>info</td> <td>info</td> <td colspan=2>info</td> <td>info</td> <td>info</td> <td>info</td> </tr> <tr> <td>info</td> <td>info</td> <td colspan=2>info</td> <td>info</td> <td>info</td> <td>info</td> </tr> <tr> <td>info</td> <td>info</td> <td colspan=2>info</td> <td>info</td> <td>info</td> <td>info</td> </tr> <tr> <td>info</td> <td>info</td> <td colspan=2>info</td> <td>info</td> <td>info</td> <td>info</td> </tr> <tr> <td>info</td> <td>info</td> <td colspan=2>info</td> <td>info</td> <td>info</td> <td>info</td> </tr> <tr> <td>info</td> <td>info</td> <td colspan=2>info</td> <td>info</td> <td>info</td> <td>info</td> </tr> <tr> <td>info</td> <td>info</td> <td colspan=2>info</td> <td>info</td> <td>info</td> <td>info</td> </tr> <tr> <td>info</td> <td>info</td> <td colspan=2>info</td> <td>info</td> <td>info</td> <td>info</td> </tr> <tr> <td>info</td> <td>info</td> <td colspan=2>info</td> <td>info</td> <td>info</td> <td>info</td> </tr> <tr> <td>info</td> <td>info</td> <td colspan=2>info</td> <td>info</td> <td>info</td> <td>info</td> </tr> <tr> <td>info</td> <td>info</td> <td colspan=2>info</td> <td>info</td> <td>info</td> <td>info</td> </tr> <tr> <td>info</td> <td>info</td> <td colspan=2>info</td> <td>info</td> <td>info</td> <td>info</td> </tr> <tr> <td>info</td> <td>info</td> <td colspan=2>info</td> <td>info</td> <td>info</td> <td>info</td> </tr> <tr> <td>info</td> <td>info</td> <td colspan=2>info</td> <td>info</td> <td>info</td> <td>info</td> </tr> <tr> <td>info</td> <td>info</td> <td colspan=2>info</td> <td>info</td> <td>info</td> <td>info</td> </tr> <tr> <td>info</td> <td>info</td> <td colspan=2>info</td> <td>info</td> <td>info</td> <td>info</td> </tr> <tr> <td>info</td> <td>info</td> <td colspan=2>info</td> <td>info</td> <td>info</td> <td>info</td> </tr> <tr> <td>info</td> <td>info</td> <td colspan=2>info</td> <td>info</td> <td>info</td> <td>info</td> </tr> <tr> <td>info</td> <td>info</td> <td colspan=2>info</td> <td>info</td> <td>info</td> <td>info</td> </tr> <tr> <td>info</td> <td>info</td> <td colspan=2>info</td> <td>info</td> <td>info</td> <td>info</td> </tr> <tr> <td>info</td> <td>info</td> <td colspan=2>info</td> <td>info</td> <td>info</td> <td>info</td> </tr> <tr> <td>info</td> <td>info</td> <td colspan=2>info</td> <td>info</td> <td>info</td> <td>info</td> </tr> <tr> <td>info</td> <td>info</td> <td colspan=2>info</td> <td>info</td> <td>info</td> <td>info</td> </tr> <tr> <td>info</td> <td>info</td> <td colspan=2>info</td> <td>info</td> <td>info</td> <td>info</td> </tr> <tr> <td>info</td> <td>info</td> <td colspan=2>info</td> <td>info</td> <td>info</td> <td>info</td> </tr> <tr> <td>info</td> <td>info</td> <td colspan=2>info</td> <td>info</td> <td>info</td> <td>info</td> </tr> <tr> <td>info</td> <td>info</td> <td colspan=2>info</td> <td>info</td> <td>info</td> <td>info</td> </tr> <tr> <td>info</td> <td>info</td> <td colspan=2>info</td> <td>info</td> <td>info</td> <td>info</td> </tr> <tr> <td>info</td> <td>info</td> <td colspan=2>info</td> <td>info</td> <td>info</td> <td>info</td> </tr> <tr> <td>info</td> <td>info</td> <td colspan=2>info</td> <td>info</td> <td>info</td> <td>info</td> </tr> <tr> <td>info</td> <td>info</td> <td colspan=2>info</td> <td>info</td> <td>info</td> <td>info</td> </tr> <tr> <td>info</td> <td>info</td> <td colspan=2>info</td> <td>info</td> <td>info</td> <td>info</td> </tr> <tr> <td>info</td> <td>info</td> <td colspan=2>info</td> <td>info</td> <td>info</td> <td>info</td> </tr> <tr> <td>info</td> <td>info</td> <td colspan=2>info</td> <td>info</td> <td>info</td> <td>info</td> </tr> </table> </div> 

Answer 2

SOLUTION

We need to add z-index on .fixed css class.

.fixed {
  top: 0;
  position: fixed;
  width: auto;
  display: none;
  border: none;
  z-index: 10000;
}