web-dev-qa-db-ja.com

テーブル内のデータが溢れる美的解決策

私は次のように作成した次のテーブルがあります。

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

問題は、最初の行の最後の列の値が大きいため、3番目の列が-で折り返されることです。
これはtable-layout:fixedとoverflow:hiddenまたはWord-wrap: break-Wordのいずれかで解決できます。

データが非表示になるため、つまりユーザーがデータを読み取ることができないため、最初のアプローチはあまり好きではありません。

最初の行は他の行よりも垂直方向にはるかに大きいため、2番目のアプローチはあまり好きではありません。
これに対する審美的な最善の解決策は何ですか？

website-designusabilitytableshtmlwrapping
1
Jim

データの最後に省略記号を付けます。これが何をするかというと、それは既知の語彙を使用して、目に見えるもの以上のものがあることを示します。

AAAAAAAAAAAAAAAAAAAAAA

なる

AAAAAA...

次に、ツールチップを使用してコンテンツ全体を表示する、ハイパーリンクを使用するか、デザインに応じて列を展開できます。

7
rk.

3番目のアプローチがあります、text-overflow：

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

詳細は dev.w3.org を参照してください。

4
nibra