テーブルヘッダーセル内の複数行のテキストと画像の整列

Question

すぐに私は苦労しています。うまくいけば、脳の詰まりがあり、簡単なものがありません。

テーブルヘッダーがたくさんあります。テーブルヘッダーのいくつかには、上向き/下向きの矢印があります。テキストを左揃えにし、画像を右揃えにする必要があります。私はスパンのコンテナ内に2つの矢印イメージを持っていますが（これはdivでもかまいません）、nowrapが適用されているので、常にサイドバイサイドで表示されます（これも要件です）。複雑さは、私たちのテーブルヘッダテキストのいくつかを2行に分割する必要があります - これは現在、テキスト中のbrで終わりです。浮動小数点数を使用すると、イメージの右から右への整列は、セルの中央ではなく、複数行のテキストの上端に垂直に揃えられます。何が間違っているのですか（少し遅れているかもしれません）、私の戦略を完全に再考する必要がありますか？

Thx MH

Answer 1

このかなりそれを行うことはできませんように思える - 私たちが近づくことができますが、それぞれのソリューションは、一緒に休憩を作業それをすべて取得するには他の何か。提案してくれてありがとう

Answer 2

画像の上に縦に並べて表示してみてください。

Answer 3

ヘッダーテキストの場合はdivsをfloat：left、画像の場合はfloat：rightを使用します。 vertical-align：ヘッダーを上にします。厄介な着色については申し訳ありません。私はデザイナーではない。

jsfiddleでそれを試すことができます。

テストテーブル：

<table> 
    <tr> 
     <th> 
      <div class="title">a header with a </br>br thing </div> 
      <div class="updown">up down</div></th> 
     <th> 
      <div class="title">a header</div> 
      <div class="updown">up down</div> 
     </th> 
     <th> 
      <div class="title">more headers</div> 
      <div class="updown">up down</div> 
     </th> 
    </tr> 
</table> 

スタイル：

th, td { border: 1px solid green; } 
th { width: 200px; vertical-align: top; } 

.title { float: left; border: solid 1px purple; overflow: hide; } 
.updown { border: solid 1px red; float: right; }