Question

以下代码用于实现可滚动的HTML表格有人可以解释这个jQuery代码是如何工作的吗？

array.sort({$0 < $1})是什么意思？$("table > *").width()在向左或向右滚动表格时如何影响函数？

scrollLeft()

这是一个有效的演示：

$('table').on('scroll', function () {
    $("table > *").width($("table").width() + $("table").scrollLeft());
});

$('table').on('scroll', function() {
  $("table > *").width($("table").width() + $("table").scrollLeft());
});

html {
  font-family: verdana;
  font-size: 10pt;
  line-height: 25px;
}
table {
  border-collapse: collapse;
  width: 300px;
  overflow-x: scroll;
  display: block;
}
thead {
  background-color: #EFEFEF;
}
thead,
tbody {
  display: block;
}
tbody {
  overflow-y: scroll;
  overflow-x: hidden;
  height: 140px;
}
td,
th {
  min-width: 100px;
  height: 25px;
  border: dashed 1px lightblue;
}

View on JSFiddle

Answer 1

请阅读。

关于thead＆amp ;;的滚动设置宽度表tidth by table width + table scroll left offset。 scrollLeft scrollLeft将为tbody＆amp;添加偏移并增加宽度。 thead推动行和colls并按照滚动位置。不要删除此jquery代码。这对你有帮助。

Answer 2

scrollLeft()增加了tbody的宽度，因此它的垂直滚动条总是在任何滚动位置附加到表的右侧。

该表被声明为display：block，因此它实际上不是表。 tbody和thead都没有table-row-group元素 - 它们都是块。

引擎盖CSS布局引擎将行包装到没有滚动条的匿名表行组中。

解释可滚动表的代码

2 个答案: