web-dev-qa-db-fra.com

Meilleure solution esthétique au débordement de données dans une table

J'ai le tableau suivant que j'ai créé comme suit:

<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>

Le problème est que la 3e colonne passe à la ligne - en raison de la grande valeur dans la dernière colonne de la première ligne.
Je peux résoudre ce problème avec table-layout:fixed et soit overflow:hidden ou Word-wrap: break-Word.

Je n'aime pas vraiment la première approche car les données seront cachées, c'est-à-dire que l'utilisateur ne pourra pas les lire.

Je n'aime pas vraiment la deuxième approche car la première rangée sera beaucoup plus grande verticalement que les autres.
Quelle est la meilleure solution esthétique à cela?

website-designusabilitytableshtmlwrapping
1
Jim

Envelopper les données avec une élipse à la fin. Ce que cela fait, c'est qu'il utilise vocabulaire conn pour montrer qu'il y a plus que ce qui est visible.

AAAAAAAAAAAAAAAAAAAAAA

devient

AAAAAA...

alors vous pouvez tilisez une info-bulle pour afficher tout le conten, utilisez un lien hypertexte ou la colonne peut être développée, selon votre conception.

7
rk.

Il existe une troisième approche, débordement de texte :

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

Voir dev.w3.org pour plus d'informations.

4
nibra