1

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?

7

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.

  • 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: … – Vince Bowdren 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
4

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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