Gmail-like text overflow

Today I've learned how to implement a nice gmail effect of text overflow. I was trying to build it for few hours with no good effect. I googled a bit and found the "correct" answer on this blog:

http://ajaxian.com/archives/learning-from-gmail

It's a very useful feature if you like to implement your web UI using liquid layout. The user may see more if he has a bigger screen (which is fine.. I like to know that having a big screen is actually a plus when I browse the net). Also, the effect allows your table to look more consistent independently on the screen resolution of the client viewing it. That's really nice!

Here's the style that I used:

...

  .grid {
     table-layout: fixed;
     width: 100%;
  }
  .grid * td {
     white-space: nowrap;
     empty-cells: show;
     overflow: hidden;
  }

...

  <table class="grid">
   <col style="width:100px"/>
   <col />
   <col style="width:100px"/>
   <tbody>
    <tr>
     <td style="padding-left:10px;">Other</td>
     <td>
      <a href="#">
        Very long text.
      </a>
     </td>
     <td style="padding-left:10px;">Other</td>
    </tr>
   </tbody>
  </table>

...

And here's how it looks like:



I've dropped the "width:100%" property. It seems to be not necessary. Have a happy coding!