我怎样才能使浮动标题列水平滚动，并防止他们左对齐？ [英] How can I make floating header columns to scroll horizontally and prevent them to align left?

问题描述

当用户滚动窗口时，我有一个始终显示其标题列的html表格。它工作正常，但标题（thead）总是左对齐;当表格狭窄和居中时，列不再匹配标题列。当表格非常宽且有许多列时，也会发生这种情况，迫使水平滚动条出现;标题不滚动，并始终显示第一列。

JavaScript：

  function moveScroll（）{
 var scroll = $（window）.scrollTop（）; 
 var anchor_top = $（＃main_table）。offset（）。top; 
 var anchor_bottom = $（＃bottom_anchor）。offset（）。top; 
 if（scroll> anchor_top&& scroll< anchor_bottom）
 {
 clone_table = $（＃clone）; 
 if（clone_table.length == 0）
 {
 clone_table = $（＃main_table）。clone（）; 
 clone_table.attr（'id'，'clone'）; 
 clone_table.css（{position：'fixed'，'pointer-events'：'none'，top：0}）; 
 clone_table.width（$（＃main_table）。width（））; 
 $（＃table_container）。append（clone_table）; 
 $（＃clone）。css（{visibility：'hidden'}）; 
 $（＃clone thead）。css（{visibility：'visible'}）; 
} 
} 
 else 
 {
 $（＃clone）。remove（）; 
 
 $ b $（＃main_table）。wrap（'< div id =table_container>< / div>'）; 
 $（'< div id =bottom_anchor>< / div>'）。 
 $（window）.scroll（moveScroll）; 
  

HTML：

 < table id =main_tablealign =center> 
< thead> 
< tr> 
< th>列1< / th> 
< th>列2< / th> 
< th>列3< th> 
< th>第4栏< / th> 
< / tr> 
< / thead> 
< tr> 
< td>列< / td> 
< td>列< / td> 
< td>列< / td> 
< td>列< / td> 
< / tr> 
< tr> 
< td>列< / td> 
< td>列< / td> 
< td>列< / td> 
< td>列< / td> 
< / tr> 
< / table> 
  

CSS：

  body {
 width：500px; 
} 
 thead tr {
 background-color：lightgrey; 
} 
  

我该如何解决这个问题？
Thanks！

预览水平滚动问题

预览狭窄居中表 - 解决

解决方案

<$ p $ {
position：'fixed'，
'pointer-events'：'none'，
left：$（＃main_table）$ p $ .css .offset（）。left +'px'，
top：0
}）


< （哦，我把你的jQuery链接在一起，只是因为我喜欢它的外观。）

I have a html table that always shows its header columns, when the user scrolls the windows. It works fine, but the header (thead) is always aligned left; when the table is narrow and centered, the columns don't match anymore the header columns. This also happens when the table is very wide and has many columns, forcing the horizontal scroll to appear; the header doesn't scroll, and always the first columns are displayed.

JavaScript:

function moveScroll(){
var scroll = $(window).scrollTop();
var anchor_top = $("#main_table").offset().top;
var anchor_bottom = $("#bottom_anchor").offset().top;
if (scroll > anchor_top && scroll < anchor_bottom)
{
    clone_table = $("#clone");
    if(clone_table.length == 0)
    {
        clone_table = $("#main_table").clone();
        clone_table.attr('id', 'clone');
        clone_table.css({position:'fixed', 'pointer-events': 'none', top: 0});
        clone_table.width($("#main_table").width());
        $("#table_container").append(clone_table);
        $("#clone").css({visibility:'hidden'});
        $("#clone thead").css({visibility:'visible'});
    }
}
else
{
    $("#clone").remove();
}
}
$("#main_table").wrap('<div id="table_container"></div>');
$('<div id="bottom_anchor"></div>').insertAfter('#main_table');
$(window).scroll(moveScroll);

HTML:

<table id="main_table" align="center">
    <thead>
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <th>Column 4</th>
    </tr>
    </thead>
    <tr>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
    </tr>
    <tr>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
    </tr>
</table>

CSS:

body {
    width: 500px;
}
thead tr {
    background-color: lightgrey;
}

How can I fix this? Thanks!

Preview horizontal scroll problem

Preview narrow centered table - solved

解决方案

http://jsfiddle.net/AvaUU/7/

Add in:

.css({
    position: 'fixed',
    'pointer-events': 'none',
    left: $("#main_table").offset().left+'px',
    top: 0
})

(Oh, and I chained a lot of your jQuery together, just because I like how that looks.)

这篇关于我怎样才能使浮动标题列水平滚动，并防止他们左对齐？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！