Javascript 解释可滚动表格的代码

Javascript 解释可滚动表格的代码,javascript,jquery,html,css,Javascript,Jquery,Html,Css,下面的代码用于实现可滚动的HTML表格。 有人能解释一下jQuery代码是如何工作的吗 $(“table>*”).width()是什么意思?当表格向左或向右滚动时,scrollLeft()如何影响函数 $('table')。在('scroll',函数(){ $(“表>*”).width($(“表”).width()+$(“表”).scrollLeft()); }); 下面是一个工作演示: $('table')。在('scroll',function()上{ $(“表>*”).width($(

下面的代码用于实现可滚动的HTML表格。
有人能解释一下jQuery代码是如何工作的吗

$(“table>*”).width()
是什么意思?当表格向左或向右滚动时,
scrollLeft()
如何影响函数

$('table')。在('scroll',函数(){
$(“表>*”).width($(“表”).width()+$(“表”).scrollLeft());
});
下面是一个工作演示:

$('table')。在('scroll',function()上{
$(“表>*”).width($(“表”).width()+$(“表”).scrollLeft());
});
html{
字体系列:verdana;
字号:10pt;
线高:25px;
}
桌子{
边界塌陷:塌陷;
宽度:300px;
溢出-x:滚动;
显示:块;
}
泰德{
背景色:#EFEF;
}
thead,
t车身{
显示:块;
}
t车身{
溢出y:滚动;
溢出x:隐藏;
高度:140像素;
}
运输署,
th{
最小宽度:100px;
高度:25px;
边框:虚线1px浅蓝色;
}

第1栏
第2栏
第3栏
第4栏
第5栏
一排
一排
一排
一排
一排
第2排
第2排
第2排
第2排
第2排
第3排
第3排
第3排
第3排
第3排
第4排
第4排
第4排
第4排
第4排
第5行
第5行
第5行
第5行
第5行
第6行
第6行
第6行
第6行
第6行
第7排
第7排
第7排
第7排
第7排
第8行
第8行
第8行
第8行
第8行
第9行
第9行
第9行
第9行
第9行
第10行
第10行
第10行
第10行
第10行
读一下

滚动表格通过表格宽度+表格滚动左偏移将宽度设置为AD&T正文。scrollLeft scrollLeft将添加偏移量并增加宽度,以便tbody&thead推动行和列并跟随滚动位置。不要删除此jquery代码。这将对您有所帮助。

scrollLeft()
增加了tbody的宽度,因此它的垂直滚动条始终附着在表格右侧的任何滚动位置

该表被声明为display:block,因此它实际上不是一个表。
tbody
thead
都没有表行组元素-它们是块


在引擎盖下,CSS布局引擎将那里的行包装到没有滚动条的匿名表行组中

您到底想知道什么?@Gabriel函数的这一部分$(“table>*”).width()以及scrollLeft如何影响函数,当表格向左或向右滚动时,它什么也不做。。。只要用鼠标滚动,jQuery代码什么都不做……这很简单,也很天才:D如果你删除jQuery行,当你向右滚动时,你会看到Y形滚动条卡在第3列的旁边,因为表宽=300px,每个TD最小宽度=100px,而tbody左位置改变了-1,-2,-3,等等,所以从逻辑上讲,tbody的Y形卷轴的卷轴将跟随tbody的位置,因此如果我们将滚动的值添加到tbody的宽度,卷轴将保持0的位置,因为滚动值越大,这也是我们为车身宽度增加的价值,希望您能理解me@Diptox得到您的解释,感谢代码与响应性设计无关。考虑删除或改写你的答案。如何不使用显示得到相同的滚动效果:BooSdc:TABLE元素是特殊的,在这一点上,它们没有溢出,好像最小宽度:MIN内容被定义在它们上面。因此,您将无法在它们上看到滚动条。