text-overflow: ellipsis in table-cell without width

Question

I'm trying to achieve a responsive table width text-overflow: ellipsis; in the middle cell that looks like this:

| Button 1 | A one-lined text that is too long and has to be... | Button 2 |

The whole table should have width: 100%; to be as large as the device. I can't set a fixed width on Button 1 nor Button 2 since the application is multilingual (a max-width should be possible though).

I can try whatever I want, the ... 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?

Answer 1

This is not really a clean solution, but it uses no JS and works in every browser I've tested.

My solution consists in wrapping the cell's contents inside a table with table-layout: fixed and width: 100%.

See the demo.

Here's the full solution:

<table class="main-table">     <tr>         <td class="nowrap">Button 1</td>         <td>             <table class="fixed-table">                 <tr>                     <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus doloremque magni illo reprehenderit consequuntur quia dicta labore veniam distinctio quod iure vitae porro nesciunt. Minus ipsam facilis! Velit sapiente numquam.</td>                 </tr>             </table>         </td>         <td class="nowrap">Button 2</td>     </tr> </table> 

.main-table {     width: 100%; }  .fixed-table {     /* magic */     width: 100%;     table-layout: fixed;      /*not really necessary, removes extra white space */     border-collapse: collapse;     border-spacing: 0;     border: 0; } .fixed-table td {     white-space: nowrap;     overflow: hidden;     text-overflow: ellipsis; }  .nowrap {     /* used to keep buttons' text in a single line,      * remove this class to allow natural line-breaking.      */     white-space: nowrap; } 

---

It's not really clear what's the intent for the side buttons, hence I've used white-space: nowrap to keep them in the same line. Depending on the use case, you may prefer to apply a min-width and let them line-break naturally.

Answer 2

Set your 100% width on the table and specify a fixed table-layout:

table {     width: 100%;     table-layout: fixed; } 

Then, set the following for whichever table cell should have the ellipsis:

td:nth-child(2) {     overflow: hidden;     text-overflow: ellipsis;     white-space: nowrap; } 

Voila! Responsive table with an ellipsis overflow!

Demo: http://jsfiddle.net/VyxES/