微件:FixTableHeader：修订间差异
跳转到导航
跳转到搜索
无编辑摘要 |
无编辑摘要 |
||
| （未显示2个用户的8个中间版本） | |||
| 第1行： | 第1行： | ||
<includeonly><script> | <noinclude> | ||
在页面任意位置加上 <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() { | window.onscroll = function() { | ||
var tables = document.getElementsByClassName("fix-table-header"); | var tables = document.getElementsByClassName("fix-table-header"); | ||
| 第10行： | 第61行： | ||
clone = table.cloneNode(true); | clone = table.cloneNode(true); | ||
clone.id = 'fixed-table-header'; | clone.id = 'fixed-table-header'; | ||
clone.style.width = table.style.width; | clone.style.width = table.style.width; | ||
table.parentNode.appendChild(clone); | table.parentNode.appendChild(clone); | ||
var rows = clone.getElementsByTagName('TR'); | var rows = clone.getElementsByTagName('TR'); | ||
for (var i = 0; i < rows.length; i++) { | for (var i = 0; i < rows.length; i++) { | ||
if (rows[i].getElementsByTagName('TD').length == 0) { | if (rows[i].getElementsByTagName('TD').length == 0) { | ||
rows[i].style.visibility = 'visible'; | rows[i].style.visibility = 'visible'; | ||
rows[i].style.pointerEvents = 'auto'; | rows[i].style.pointerEvents = 'auto'; | ||
} else break; | |||
} else | |||
} | } | ||
} | } | ||
return; | return; // don't remove clone | ||
} | } | ||
} | } | ||
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
|}