Question

对于不适合单元格的文本，可以使用text-overflow: ellipsis;或text-overflow: fade(10px);添加省略号或淡出效果。但是，如果表格可以水平溢出，则不起作用。

如果一列或多列不适合屏幕上的表格，是否可以为文本或表格添加淡出效果？（在我的场景中，当表有很多行时，水平滚动条可能不可见，因此这个提示可能不会显示给用户。）

最右边的列会有淡出，以显示在可查看区域外面有列。

（我正在使用bootstrap 3.3。）

JsFiddle

参考：text-overflow

Answer 1

如果您将表格包装在另一个div中，则可以使用该div的after伪元素来获得渐变背景。有关此示例，请参阅this fiddle（基于您提供的小提琴）。

这个小提琴的相关风格变化是：

df.b=np.where(df.b,df.b,df.a)

df
Out[33]: 
   a  b
0  1  5
1  2  2
2  3  6
3  4  4

请注意，容器具有设定宽度。这意味着表会溢出它。后元素需要设置内容，但我们实际上并不希望任何内容可见，因此我们使用<div class="container"> <table class="table table-striped table-bordered table-condensed" style="margin-bottom: 0; overflow-x: visible;"> ... </table> </div> <style> container{ width:100%; padding:0; position:relative; } .container::after{ content:''; display:block; position:absolute; top:0; bottom:0; right:0; width:200px; background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */ } .table{ max-width:100%; } </style>。之后，只需定位它（使用绝对值，因此我们可以将其基于容器div的位置），然后给它一个背景渐变。

Answer 2

如果你感兴趣的话，你可以尝试一种不同的方法向用户发出信息，表中的数据比视口中的数据更多。

我的建议是将表包装在容器div中，并使用vh and vw单位将容器大小限制为视口大小。这样，只要表格垂直或水平溢出，您就会看到滚动条。

.table-wrapper {
  max-width: 100vw;
  max-height: 100vh;
  overflow: auto;
}

您可以在此处查看此示例https://jsfiddle.net/ukov4646/5/

将淡出效果添加到大表中的最后一列

2 个答案: