title: CSS Fill whitespace inside table TD with ellipsis
body: <p>I have a table in bootstrap with text inside each td.  I don't know if this is possible but I want to fill the whitespace with ellipsis.  </p>
  
  <p>The reason I do not want a border bottom is that I do not want the text underlined.</p>
  
  <p>Here is my table and what I have tried so far.</p>
  
  <p><a href="https://i.stack.imgur.com/xouJI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xouJI.png" alt="before and after pseudo with ellipsis"></a></p>
  
  <p>The first and last child td are aligned left and right respectively.  Any td in the center is center aligned.  The idea is to have the ellipsis fill whitespace on the right with left align.  Whitespace on the left with right align and on both sides for the center.</p>
  
  <p>My first thought was to use css :before and :after and overfill the content with '.......................' then break with text-overflow: ellipsis like.</p>
  
  <pre><code>.table-menu .table-responsive td:first-child:after, .table-menu .table-responsive td:last-child:before {
    text-overflow:ellipsis;
    content: '.......................';
  }
  </code></pre>
  
  <p>but as the table is responsive, this will not work.  The tables need to be fixed width for the result to work.  So overfilling the content just pushed it to a new line.</p>
  
  <p>Is there a way in css or js to achieve this or do I need another approach to filling the whitespace?</p>
  
  <p>Here is a jsfiddle of my above code <a href="https://jsfiddle.net/h3n18huh/1/" rel="nofollow noreferrer">https://jsfiddle.net/h3n18huh/1/</a></p>