水平方向のスペースを増やすことなくソート方向を示す
水平方向に非常にタイトなテーブルがあります。表の各列は、ヘッダーのタイトルをクリックしてソートできます。
ご覧のとおり、ほとんどの列には注文インジケーターを配置するための十分なスペースがありません。
並べ替え順序を示すより良い方法に関するアイデアはありますか？フォントサイズと列幅はそのままにしたい。
CSS3でデモソリューションを作成しました。給与の列は昇順でソートされ、ボーナスの列は降順で表示されます。
horiontal-tight-table-sorter-css で作業をgithubにコミットします。
こちらのHTMLページを簡単に確認できます htmlpreview horiontal-tight-table-sorter-css 。
デモのために、Chromeでのみテストしました。
この助けを願っています。
このようなものを試してください。列ラベルの水平位置を同じに保ち、上部に水平に並べ替えを追加しますが、目立つ色を使用して小さいフォントにします。
可能であれば、その列ラベルを持つdiv（またはテーブルセル）全体をクリック可能にし、ソートアイコンをクリック可能にします。
各アイテムのスペースを予約することで、矢印の可能性を説明できます。これにより、列の幅が同じになり（矢印かどうかにかかわらず）、矢印とテキストを水平にすることができます。
赤で示された予約済みスペース。
より多くの水平方向のスペースを使用せずにソート方向を示すことが要件である場合、主なオプションはより多くの垂直方向のスペースを使用でソート方向を表示することです。
ただし、他に考慮したいことがあります。
列を分析して最も重要なセクション/関連するセクションのみを表示。メインテーブルビューから特定のアイテムを削除して、スペースを増やすことができます。テーブル内のアイテムがクリック可能で、詳細ビューに移動する場合は、代わりに詳細ビューでビュー/ダウンロード数を表示できます。タイトルをソートするための最も重要なメトリックは評価のようであり、視聴回数が実際にエンドユーザーにアイテムの品質を非常によく伝えるかどうかはわかりません。
たぶん、ソート方向を示すことは重要ではありません。タイトル列が他のすべてのリンクと同じスタイルを使用してクリック可能であることを示している場合、並べ替え方向矢印を追加してもあまりメリットはありません。ユーザーが列アイテムを1回クリックしてリストが再配置されているのを確認しても、順序が希望どおりではない場合、リンクをクリックするとリストが再配置されることがわかっているので、正しい順序になるまで再度クリックするのは理にかなっています。
たぶん、あなたは単一のソート方向ソリューションを実装できます。これは、各アイテムに対して最もソート方向が最も理にかなったものに基づいています。タイトルまたは作成者をクリックすると、リストがアルファベット順に昇順で並べ替えられ、評価をクリックすると、リストが数値的に（または星で）降順に並べ替えられます。最低評価で並べ替える人はいますか？そうでない場合は、最高の評価をデフォルトにする必要があります。これにより、プロセス全体を簡略化できます。列をクリックすると、（クリックした列に基づいて）ソートするのに意味のある方向にテーブルがソートされ、アクションが実行されたことを示すために列が一時的にハイライト表示されます（カラーフェードイン/アウト）。クリックされたアイテムに基づきます。
ヘッダーセルの背景を使用すると機能するかどうかを検討してください。おそらくこのような何か？
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
もちろんこれは非常に大まかなスケッチです。グラフィックスの人なら誰でも、微妙で美しいものを作ることができるはずです...