do more text in td

by Vladimir

HTML

<table rules="all">
<tr>
    <td>
        <div class='w'>
            <div class='l'><a href="about:blank" target="_blank">Длинная ст рока</a></div>
        </div>
        </td>
        </tr>
            <tr>
    <td>
        <div class='w'>
            <div class='l'><a href="about:blank" target="_blank">Длинная ст рока</a></div>
        </div>
        </td>
        </tr>
            <tr>
    <td>
        <div class='w'>
            <div class='l'><a href="about:blank" target="_blank">Длинная ст рока</a></div>
        </div>
        </td>
        </tr>
        </table>

CSS

td {
    max-width:30px;
    max-height:20px;
    /*overflow:hidden;*/
}
table {
    border:1px solid #000;
}
div.w {
    position:relative;
    height:20px;
    /*z-index:1;*/
}
div.l {
    height:20px;
    z-index:1;
    width:20px;
    overflow:hidden;
}
div.l:hover {
    z-index:3;
    color: #F00;
    width:300px;
    top: 5px;
    left: 5px;
    position:absolute;
    background: #FFF;
}