Merge branch 'theadsticky' into 'master'

Theadsticky

See merge request !181

Documentation/Manual.rst

@@ -271,7 +271,7 @@ Setup a *report* to manage all *forms*:
         head = {{'b|p:id={{pageAlias:T}}&form=copyFormFromExt|t:Copy form from ExtForm|A:data-reference=copyForm' AS _link}}
                <table class="table table-hover qfq-table-50 tablesorter tablesorter-filter" id="{{pageAlias:T}}-form">
         tail = </table>
-        rbeg = <thead><tr>
+        rbeg = <thead class="qfq-sticky"><tr>
         rend = </tr></thead>
         fbeg = <th>
         fend = </th>
@@ -7457,10 +7457,11 @@ QFQ iterates over the result set of `dragAndDropOrderSql`. The value of column `
 QFQ CSS Classes
 ---------------
 
-* `qfq-table-50`, `qfq-table-80`, `qfq-table-100` - set min-width and column width to 'auto'
-* Background Color: `qfq-color-grey-1`, `qfq-color-grey-2`  (table, row, cell)
-* `qfq-100`: Makes an element 'width: 100%'.
-* `qfq-left`: Text align left.
+* `qfq-table-50`, `qfq-table-80`, `qfq-table-100` - assigned to `<table>`, set min-width and column width to 'auto'.
+* Background Color: `qfq-color-grey-1`, `qfq-color-grey-2` - assigned to different tags (table, row, cell).
+* `qfq-100` - assigned to different tags, makes an element 'width: 100%'.
+* `qfq-left`- assigned to different tags, Text align left.
+* `qfq-sticky` - assigned to `<thead>`, makes the header sticky.
 
 Bootstrap
 ---------
@@ -8293,7 +8294,7 @@ has the form be used. The following report includes the regular `form-editor`_ a
                 AND {{formIdHistory:S0}}=0
                 AND {{formAllUsage:S0}}=0
      head = <table class="table table-hover qfq-table-50 tablesorter tablesorter-filter" id="{{pageAlias:T}}-form">
-     rbeg = <thead><tr>
+     rbeg = <thead class="qfq-sticky"><tr>
      rend = </tr></thead>
      tail = </table>
 

less/qfq-bs.css.less

@@ -816,4 +816,15 @@ legend {
   100% {
     transform: scaleX(-1) rotate(0deg);
   }
-}
\ No newline at end of file
+}
+
+thead.qfq-sticky th, thead.qfq-sticky td {
+  position: sticky;
+  top: 0;
+  background-color: white;
+  z-index: 9999;
+}
+
+thead.qfq-sticky td {
+  top: 49px;
+}