Rubber cells of the table with overflow:hidden

Problem : to create krossbrauzernuju the table which "rubber" cells will possess property overflow:hidden.

To solve such problem  not so it is simple, as it seems at first sight. Propisyvanie to cells of the table of style property overflow:hidden will not earn in one browser how it would be desirable...

For the decision it is necessary to use a combination of cells of the table and enclosed DIVov.

CSS-And a HTML-code we look below.

.div {

      width:100 %; overflow:hidden; white-space:nowrap;

      border:1px solid red;

}

.div div {float:left;}

<table width = " 100 % " border = "1">

<tr>

<td width = " 30 % ">

<div class = "div"> <div>

First First First First First First First <br/> First First First First First First First First

</div> </div>

</td>

<td width = " 40 % ">

<div class = "div"> <div>

Second Second Second Second Second Second Second Second Second Second Second Second Second

</div> </div>

</td>

<td width = " 30 % ">

<div class = "div"> <div>

Third Third Third Third Third Third Third Third Third Third Third Third Third Third Third

</div> </div>

</td>

</tr>

</table>

We look a working example <http: // www.internet-technologies.ru/? url=http%3A%2F%2Ffastcoder.org%2Fdemo%2FfloatingCells.html>.

It is checked up in:

- IE 6;

- Mozilla Firefox 1.5;

- Opera 9.1;