小编Nic*_*k G的帖子

我有一个关于我目前工作的例子:https://jsfiddle.net/pv5xroLc/

我的问题是,当我的示例中的表完全滚动到右侧时,即使无法进一步滚动,淡入渐变仍然覆盖了我的表的一部分,因此它使得最后一列更难以阅读.我想知道隐藏这个渐变的最佳解决方案是什么,同时仍然清楚表明该表可以水平滚动(这将出现在移动设备上).

目前,我的html结构如下:

<div class="fader">
    <div class="scrollable">
       *content*
    </div>
</div>

该.fader元素有一个::after伪元素,其中包含"推子",它是一个绝对定位的元素,我用它来表示元素可以水平滚动.该.scrollable元素是一个水平滚动元素,用于保存我的表格.

我目前有两个我考虑过的解决方案:

1. 添加一个侦听器以检查滚动条何时到达右侧(如此示例),然后隐藏或淡出渐变.这个问题是我在页面上有多个这些褪色的表格,我不确定设置这些聆听者的最有效方法是什么.我正在使用Vue.js,所以我不确定这是否/应该是一个指令,或者只是在页面上为每个表设置一个监听器.
2. 在表格的右侧添加一些空白区域,这样您可以滚动一点点超过实际表格的末尾,渐变只会混合到背景中.我已经尝试为表和.scrollable元素添加填充和边距,但它不会在表后添加任何额外的空间.

如果有人对他们认为我应该做的事情提出建议,我们将不胜感激.

我有一个表,<td>每行可以有不同数量的元素,但<td>每行最多3个元素.假设我想选择少于3个<td>元素的行并将它们分配给变量,有没有办法只用jQuery选择这些行？我知道我可以使用迭代遍历每一行的东西,如下所示:

var rows = $("tr").filter(function() {
  return $(this).children().length < 3
});

rows.css("background-color", "blue");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
  </tbody>
</table>

有没有办法只用jQuery选择器和方法(即.siblings()或.parents())来做同样的事情？

这是我给出的一个例子的JSFiddle.我找了一个类似的问题,但找不到这样的东西,所以我希望有人会有一些想法,如果这是可能的.