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?

Improve this question

2 Answers 2

Reset to default
8

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.

Improve this answer
4
  • 4
    Or even better are ellipses buttons ...
    – Austin French
    Commented May 11, 2013 at 23:54
  • @AthomSfere:How do I create ellipses buttons?
    – Jim
    Commented May 12, 2013 at 11:01
  • @Jim: The true ellipsis is a separate punctuation character like this: …
    – Vince Bowdren
    Commented May 22, 2013 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
    Commented May 22, 2013 at 20:19
5

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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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