微件:FixTableHeader：修订间差异

2019年2月1日 (五) 20:37的最新版本

在页面任意位置加上 {{#widget:FixTableHeader}} 然后在表格的 class 中加上 fix-table-header 就可以让表头跟着页面滚动

和 sortable 兼容性不佳, 目前正在想办法

表头1	表头2	表头3
内容11	内容12	内容13
内容21	内容22	内容23
内容31	内容32	内容33
内容41	内容42	内容43
内容51	内容52	内容53

{{#widget:FixTableHeader}}
{| class="wikitable fix-table-header"
|-
! 表头1 !! 表头2 !! 表头3
|-
| 内容11 || 内容12 || 内容13
|-
| 内容21 || 内容22 || 内容23
|}

@@ 第1行： / 第1行： @@
-<includeonly><style>
+<noinclude>
-#fixed-table-header { background-color: white; }
+在页面任意位置加上 <code><nowiki>{{#widget:FixTableHeader}}</nowiki></code> 然后在表格的 class 中加上 <code>fix-table-header</code> 就可以让表头跟着页面滚动
+和 <code>sortable</code> 兼容性不佳, 目前正在想办法
+{{#widget:FixTableHeader}}
+{| class="wikitable fix-table-header"
+|-
+! 表头1 !! 表头2 !! 表头3
+|-
+| 内容11 || 内容12 || 内容13
+|-
+| 内容21 || 内容22 || 内容23
+|-
+| 内容31 || 内容32 || 内容33
+|-
+| 内容41 || 内容42 || 内容43
+|-
+| 内容51 || 内容52 || 内容53
+|}
+<pre><nowiki>
+{{#widget:FixTableHeader}}
+{| class="wikitable fix-table-header"
+|-
+! 表头1 !! 表头2 !! 表头3
+|-
+| 内容11 || 内容12 || 内容13
+|-
+| 内容21 || 内容22 || 内容23
+|}
+</nowiki></pre>
+</noinclude><includeonly><style>
+#fixed-table-header {
+    position: fixed;
+    top: 0;
+    margin: 0;
+    border-collapse: separate;
+    border-spacing: 0;
+    border-width: 0;
+    background-color: transparent;
+    pointer-events: none;
+    visibility: hidden;
+}
+#fixed-table-header > tbody > tr > th {
+    border-left-width: 0;
+    border-right-width: 0;
+}
+#fixed-table-header > tbody > tr > td {
+    border-left-width: 0;
+    border-right-width: 0;
+}
 </style><script>
 window.onscroll = function() {
      var tables = document.getElementsByClassName("fix-table-header");
-     var hdr = document.getElementById('fixed-table-header');
+     var clone = document.getElementById('fixed-table-header');
      for (var i = 0; i < tables.length; ++i) {
          var table = tables[i];
          var rect = table.getBoundingClientRect();
          if (rect.top < 0 && rect.bottom > 0) {
-             if (hdr == null) {
+             if (clone == null) {
-                 hdr = table.cloneNode(true);
+                 clone = table.cloneNode(true);
-                 hdr.id = 'fixed-table-header';
+                 clone.id = 'fixed-table-header';
-                 hdr.style.position = 'fixed';
+                 clone.style.width = table.style.width;
-                hdr.style.pointerEvents = 'none';
+                 table.parentNode.appendChild(clone);
-                hdr.style.top = 0;
+                 var rows = clone.getElementsByTagName('TR');
-                hdr.style.width = table.style.width;
+                 for (var i = 0; i < rows.length; i++) {
-                 table.parentNode.appendChild(hdr);
+                     if (rows[i].getElementsByTagName('TD').length == 0) {
-                 hdr.style.visibility = 'hidden';
+                         rows[i].style.visibility = 'visible';
-                 for (var i = 0; i < hdr.childNodes.length; i++)
+                         rows[i].style.pointerEvents = 'auto';
-                     if (hdr.childNodes[i].tagName == 'THEAD') {
+                     } else break;
-                         hdr.childNodes[i].style.visibility = 'visible';
+                }
-                         hdr.childNodes[i].style.pointerEvents = 'auto';
-                     }
              }
-             return;
+             return;  // don't remove clone
          }
      }
-     if (hdr != null) hdr.remove();
+     if (clone != null) clone.remove();
 }
 </script></includeonly>

微件:FixTableHeader：修订间差异

2019年2月1日 (五) 20:37的最新版本

导航菜单

搜索