website design - Best aesthetically solution to overflowing data in a table

I have the following table which I created as follows:

  
  
   
  
  
  
















































  
      
First Name
      
Last Name
      
Date
      
Notes
  
  
      
Jill
      
Smith
       
20-12-2013
       
aaAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
  
  
      
Jill
      
Smith
      
20-12-2013
      
AAAa
  
  
      
Eve 
      
Jackson
      
20-12-2013
      
AAAa
  
  
      
John 
      
Doe
       
20-12-2013
      
AAAa
  
  
      
Adam 
      
Johnson
      
20-12-2013
      
AAAa
  
  
  
   


  
  

The problem is that the 3rd column wraps arround - due to the big value in the last column of the first row.
I can solve this with table-layout:fixed and either overflow:hidden or word-wrap: break-word.

I don't really like the first approach since the data will be hidden, i.e. the user will not be able to read them.

I don't really like the second approach since the first row will be much vertically larger than the others.
What is the best aesthetically solution to this?

Answer

Wrap the data with an elipsis at the end. What this does is, it uses known vocabulary to show there is more than what is visible.

AAAAAAAAAAAAAAAAAAAAAA

becomes

AAAAAA...

then you can use a tooltip to show the entire content, use hyperlink or the column can be expanded, depending on your design.