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 th

Answer 1

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/