Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I have the following table which I created as follows:

<html>  
<head>  
<style type="text/css">  
html {  
    background-color: #fff;  
}  
body{  
    text-align:center;  
}  
table{  

    border-collapse:collapse;  
}   
table,th, td{       
    border: 4px, solid;     
}    

th{  
    text-transform:uppercase;  
}  


div {  
    width: 720px;  

    border: 1px solid #000;  

    margin: 0 auto;  
    margin-left:150px;  
    padding:0;  
}  

</style>   
</head>  
<body id="article">  
<div >  
<table>  
<tr>  
    <th>First Name</th>  
    <th>Last Name</th>  
    <th>Date</th>  
    <th>Notes</th>  
</tr>  
<tr>  
    <td>Jill</td>  
    <td>Smith</td>   
    <td>20-12-2013</td>   
    <td>aaAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td>  
</tr>  

<tr>  
    <td>Jill</td>  
    <td>Smith</td>  
    <td>20-12-2013</td>  
    <td>AAAa</td>  
</tr>  

<tr>  
    <td>Eve </td>  
    <td>Jackson</td>  
    <td>20-12-2013</td>  
    <td>AAAa</td>  
</tr>  

<tr>  
    <td>John </td>  
    <td>Doe</td>   
    <td>20-12-2013</td>  
    <td>AAAa</td>  
</tr>  

<tr>  
    <td>Adam </td>  
    <td>Johnson</td>  
    <td>20-12-2013</td>  
    <td>AAAa</td>  
</tr>  


</table>  
</div>   


</body>  
</html>  

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?

share|improve this question
add comment

2 Answers

up vote 7 down vote accepted

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.

share|improve this answer
4  
Or even better are ellipses buttons ... –  Austin French May 11 '13 at 23:54
    
@AthomSfere:How do I create ellipses buttons? –  Jim May 12 '13 at 11:01
    
@Jim: The true ellipsis is a separate punctuation character like this: … –  vincebowdren May 22 '13 at 14:50
    
When you have to ellipses you can display the detail entire cell content) in a tooltip which displays in roll over. –  pierre lebailly May 22 '13 at 20:19
add comment

There is a third approach, text-overflow:

.shorten {
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis; /* or "clip" */
}

See dev.w3.org for more information.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.