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

HTML

    
         A very looooooooooooooooooooooooooooooong string
    

CSS

td {
    position: relative;
}

.ellipsis {
    /*Here is the trick:*/
    position: absolute;
    width: 100%;
    /*End of the trick*/

    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}