JQuery DataTabels - JQueryのUIテーマ、矢印の囲みTH

Question

私はjquery UIテーマのdatatablesを使用しています。ソート可能な列のTHの一部は、その列をソートするための小さな矢印アイコンを囲んでいます。

私は約7列が表示されています。テキストの量が少ないTD（実際のTHテキストよりも幅が広い）では、矢印アイコンがTHにラップします。すべてのTHタグがテキストをラップしないようにする方法についてのアイデア？私は 'sClass：nowrap'をすべての列に追加してから、white-space：nowrapを使用するcss nowrapクラスを作成しましたが、THではなくTDでのみ動作します。

は基本的にすべての列の最小幅は同じ幅（矢印を含む）TH内容として

Answer 1

であるあなたはこの1つでタフな時間を持っているつもりだ、と私は思いますことを確認する方法が必要です私が自分のアプリケーションを修正できるように間違っていることを愛する。理由は次のとおりです。

任意の列の既定の「最小幅」動作は、ヘッダーテキストまたは指定した列の最も幅の広い単語のいずれかが狭くなります。明確にするための例：ある矢印がないとふりかける - ヘッダー「名前」の列があり、その列のセルの形式は「firstname [スペース]姓」です。その列のどこかに、セルの1つに "Consuela Ruiz"が含まれています。列は、それ自身のアルゴリズムに従って補償を開始する前に、「コンスエラ」を含むのに要する程に狭くすることができる。

したがって、矢印はその計算の一部であるため、浮動小数点のスパンでなければならず、各THの右側に配置するのが難しくなります。

1. ヘッダは、あなたが望むようにレイアウトさ：私が作ってしまった

   妥協は、このでした。テーブルがコンテンツではなくヘッダーに応じて最適化されるように、幅を（％またはpxの観点から）指定する必要があるかどうかを調べます。

2. TDエレメントに、overflow: hiddenとtext-overflowの省略記号を設定します。

3. DataTablesパラメータ（これを行うより良い場所があるかもしれません、それは私が選択したものです）、すべてのテーブルセルを取り、その内容をタイトルに設定する関数を設定しますホバー上に切り捨てられた列を表示するツールチップ）。

Answer 2

THEAD目が両側にパディングを持っていないことを確認してくださいあなたのページに

<style type="text/css"> 
table.display thead th span.css_right { 
    float: right; 
} 
</style> 

Answer 3

をこのCSSを追加します。私のために問題を解決しました！

Answer 4

私もこの問題を抱えています。コードを掘り下げた後の基本的な理由は、dataTablesがjQuery UIでtheadを再計算/再投入したときにdivにfloatスパンを挿入するだけですが、元のテキストもfloatスパンでラップしません。コードは次のようになります：

<th class="ui-state-default" style="width: 85px; "> 
    <div class="DataTables_sort_wrapper"> 
     <!-- NEED FLOATED SPAN HERE-->Rate Package 
     <span class="css_right ui-icon ui-icon-carat-2-n-s"></span> 
    </div> 
</th> 

フロートに基づいて、それをラップします。両方に対応するのに十分な余裕があるようです。

1. thタグのクラスを使って最小幅/最大幅を指定します。
2. datatables.netに修正チケットを送信してください。私は周りを遊んでコードをあまりにも掘り下げる時間がありませんでした。

Answer 5

ラッピングの問題はフロートの右端のためです。 私はポジションで遊ぶ解決策を見つけました。私は重複と矢印が右側に配置することができる絶対位置で防ぐパディング右で

table.dataTable thead th { 
    position: relative; 
    padding-right: 20px; 
} 
table.dataTable thead th:after { 
    position: absolute !important; 
    right: 0px; 
} 

： はちょうどこのCSSを使用します。