How to negate "nowrap" to increase the width of an element?

Question

I have a structure like this:

<table> <tr> <td class = "one">This cell should has width 60%</td> <td class = "two"> <div> <div class = "three">Hint</div> <div class = "four"> And ending of this string should be cutted out with ellipsis, no matter how long string will be </div> </div> </td> </tr> </table> 

with css

 .one { width: 60%; } .three { display: none; float: right; } .two:hover .three { display: block; } .four { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 

I want the left cell always to be 60% wide and the right cell everything else. The long single-line text in the right cell must be truncated with an ellipse, as when the "tooltip" element is, it is not displayed.

I tried to use display: inline , float: left , position: absolute , but did not get any result that would not destroy the floating tooltip on the right side.

jsFiddle here: http://jsfiddle.net/Z2kLV/1/

In addition, the solution does not have to be a cross browser, I only need it for chrome.

Please help, I can not do this.

Answer 1

I didn’t search well enough and now found my answer here

This is to add the following css element to the table element:

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

Working example on jsFiddle: http://jsfiddle.net/Z2kLV/5/