title: Adding fade-out effect to last column in large table
body: <p>For text that does not fit in side a cell it is possible to add ellipsis or a fade out effect using <code>text-overflow: ellipsis;</code> or<code>text-overflow: fade(10px);</code>. However this does not work if the table can overflow horizontally.</p>
  
  <p>Is it possible to add a fadeout effect to the text or the table if a column or several columns do not fit within a table on screen? (In my scenario the horizontal scrollbar may not be visible when the table has many rows so this cue may not be shown to user.)</p>
  
  <p>A right-most column would have a fade out to make it obvious that there are columns outside view-able area.</p>
  
  <p>(I am using bootstrap 3.3.)</p>
  
  <p><a href="https://jsfiddle.net/kashiraja/ukov4646/" rel="nofollow noreferrer">JsFiddle</a></p>
  
  <p>Reference: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow" rel="nofollow noreferrer">text-overflow</a></p>