各列のサイズを同じにすることなく、流体幅テーブルで楕円を使用するにはどうすればよいですか？

Question

テーブルの私の列がid,name,descriptionおよびphoneであるとします。 description列は1〜255文字ですが、IDは最大3文字です。

各列のサイズが同じではなく、列のサイズを適切に設定したいと考えています。 description列は、ウィンドウが全体の内容に収まるには小さすぎる場合に省略記号にオーバーフローするようにしたいと思います。

table-layout:fixed;は、text-overflow: ellipsis;を動作させる標準的な方法ですが、すべての列のサイズを同じサイズに変更します。私は固定するよりもむしろ幅を維持することを好むだろうauto。

お手伝いできますか？ここで

は私jsFiddleです：http://jsfiddle.net/RQhkk/1/

ここで私が扱ってるかのスクリーンショットです：

Table 1は、すべての列と同じサイズになりますどのように注意してください？それはひどい。

Table 2はコンテンツに基づいて列のサイズを変更する方法に注意してください。それは良い。コンテンツが長すぎる場合を除いて：Table 3。その後、それは適合しません。その場合、省略記号にあふれさせたいです。私は列の幅は、あなたが期待するものですを削除した場合

<div id="t1"> 
<table> 
    <thead> 
     <tr> 
      <th>id</th> 
      <th>name</th> 
      <th class="ellipsis">description</th> 
      <th>phone</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>1</td> 
      <td>alpha</td> 
      <td class="ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td> 
      <td>555-555-5555</td> 
     </tr> 
     <tr> 
      <td>2</td> 
      <td>beta</td> 
      <td class="ellipsis">Sed et nulla neque.</td> 
      <td>555-555-5555</td> 
     </tr> 
     <tr> 
      <td>3</td> 
      <td>gamma</td> 
      <td class="ellipsis">Morbi imperdiet neque ut lorem rhoncus fermentum.</td> 
      <td>555-555-5555</td> 
     </tr> 
    </tbody> 
</table> 
</div> 

<style> 
#t1 table { 
    table-layout:fixed; 
    width:100%; 
} 
#t1 td { 
    white-space: nowrap; 
} 
#t1 td.ellipsis { 
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    word-break: break-all; 
    word-wrap: break-word; 
} 
</style> 

- コンテンツにサイズ設定：

そして、ここでは私のHTMLテーブルとCSSのコードです。残念ながら、固定レイアウトなしで省略記号を使用することはできません。どこが間違っていますか？

Answer 1

をtd.ellipsisに指定すると機能します。

Answer 2

解決方法jqueryを使用して、列内のテキストの最大幅を取得し、最大サイズになる省略記号列を除いて内容の幅に割り当てます。

マイjsfiddleの例では、私が見つけた解決策は、次のようにあなたの細胞をスタイルにあるここhttp://jsfiddle.net/qt7eQ/1/

<script type="text/javascript"> 
$(function() { 
    //add a innerParagraph block element to all columns except for the one that has the class ellipsis 
    $("#t3 tr td:not(.ellipsis)").wrapInner(function() { 
      return "<p class='innerParagraph'></p>"; 
    }); 

    //get the first column and assign it the width of the elements in the first column 
    $("#t3 tr th:nth-child(1)").width(getMaxWidthOf("#t3 tr>td:nth-child(1) p")); 
    $("#t3 tr td:nth-child(1)").width(getMaxWidthOf("#t3 tr>td:nth-child(1) p")); 

    //get the second column and assign it the width of the elements in the second column 
    $("#t3 tr th:nth-child(2)").width(getMaxWidthOf("#t3 tr>td:nth-child(2) p")); 
    $("#t3 tr td:nth-child(2)").width(getMaxWidthOf("#t3 tr>td:nth-child(2) p")); 

    //get the fourth column and assign it the width of the elements in the forth column 
    $("#t3 tr th:nth-child(4)").width(getMaxWidthOf("#t3 tr>td:nth-child(4) p")); 
    $("#t3 tr td:nth-child(4)").width(getMaxWidthOf("#t3 tr>td:nth-child(4) p")); 
}); 


function getMaxWidthOf(selector){ 
    var maxWidth = 0; 
    //go through each paragraph in the right column and find the widest value. 
    $(selector).each(function() { 
     if(maxWidth < $(this).width()){ 
      maxWidth = $(this).width(); 
     } 
    }); 
    // assign max width to column 
    return maxWidth; 
} 
</script> 

<!-- add this style --> 
<style type="text/css"> 
#t3 table { 
    table-layout:fixed; 
{ 
.innerParagraph { 
    margin:0; 
    display:inline-block; 
} 
</style> 

Answer 3

見つけることができます：

td{ 
    white-space: nowrap; 
} 

td.description{ 
    overflow: hidden; 
    text-overflow: ellipsis; 
    max-width: 1px;  
    width: 100%; 
} 

最初の部分は限り縮小する各列を強制します任意のセル内のクリップされたテキストを可能かつ省略します。ただし、テーブルヘッダーを使用して最小幅を提供できるため、1pxに縮小することはありません。また、表内の行折り返しも防止されます。

2番目の部分は、すべての列間に均等に広がるのではなく、すべてのスペアスペースが説明列に確実に収まるようにします。

最後に、記述欄に真の最小幅を設定する場合は、列幅ではなく列幅に最小幅を入れてください。ヘッダーよりも薄くする。

実装については、http://jsfiddle.net/BCZTB/を参照してください。