title: text-overflow: ellipsis in table-cell without width
body: <p>I'm trying to achieve a responsive table width <code>text-overflow: ellipsis;</code> in the middle cell that looks like this:</p>
  
  <p><code>| Button 1 | A one-lined text that is too long and has to be... | Button 2 |</code></p>
  
  <p>The whole table should have <code>width: 100%;</code> to be as large as the device. I can't set a fixed width on <code>Button 1</code> nor <code>Button 2</code> since the application is multilingual (a <code>max-width</code> should be possible though).</p>
  
  <p>I can try whatever I want, the <code>...</code> only appears when I set a fixed width. How can I tell the middle cell to "use the space available" without the help of JavaScript?</p>