显示固定标题

时间：2017-10-26 18:32:28

标签： javascript html css

我尝试使用以下代码from this question创建一个固定的表标题，但是使用复选框并且它们无法正确显示。 它适用于小提琴示例，但我使用Symfony3和Twig，因此可能导致问题。

Screenshot of table-header, checkboxes appear twice for each column instead of once

我该如何解决这个问题？

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>

2 个答案:

答案 0 :(得分：0)

修复表格标题的简单方法，当你的表格有固定宽度和固定布局时只有css，就像这个例子：

  

注意：如果任何单元格必须更大，而其他单元格则使用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>

答案 1 :(得分：0)

<强>解

我们需要在.fixed css类上添加z-index。 

.fixed {
  top: 0;
  position: fixed;
  width: auto;
  display: none;
  border: none;
  z-index: 10000;
}
相关问题
最新问题