html - テーブル セルからのテキストの配置に影響を与えずに CSS で矢印の位置を固定する

Question

次のような HTML テーブルがあります。

<div>
    <table border="1">
        <thead>
            <tr class="example">
                <th>
                    <span id="item1">
                      <span>Value1</span>
                      <span class="sort-up no-display">&nbsp;</span>
                    </span>
                </th>
                <th>
                    <span id="item2">
                       <span>Value2</span>
                       <span class="sort-up no-display">&nbsp;</span>
                    </span>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Example 1</td>
                <td>Example 2</td>
            </tr>
            <tr>
                <td>Example 3</td>
                <td>Example 4</td>
            </tr>
        </tbody>
   </table>
</div>

ヘッダーには、jqueryでマウスオーバー/マウスアウトしたときに表示される非表示の上矢印があります

<script type="text/javascript">
      $(function(){
            $(".example th").on("mouseover mouseout", function(){
               var $sort_up = $(this).children().find("span").first().next();

                $sort_up.toggleClass("no-display");
            });
      });

</script>

cssはどこにno-displayありますか。display:none

スクリーンショット（前）

以降：

mouseover/mouseout イベントでヘッダー タイトルを移動しないようにします。

どうやってするか ？たぶんCSSのトリックです。

PS: たぶん次のように:

CSSの知識がまったくない私に、ご辛抱いただきありがとうございます。

Answer 1

画像を使用して矢印を作成している理由が完全にはわかりません。これにより、配置の問題が発生します。text()悪名高い Unicode 上向きの三角形であるテキスト矢印を作成するためにを使用すると、配置はそのまま維持されます。

$('.example th').on('mouseover mouseout',
                     function(e){
                         var evt = e.type,
                             sort = $(this).find('span:last');
                         if (evt == 'mouseover'){
                             sort.text('▲');
                         }
                         else if (evt == 'mouseout') {
                             sort.text('');
                         }
                     });​

JS フィドルのデモ。

Answer 2

CSS プロパティを使用して、html フローから外します。またはのいずれposition: absoluteかfloat: right。

Answer 3

これらの変更を行います

<span id="Val">Value2</span>
#Val{position:absolute;} Add top and left as per your need.

これで、矢印が表示されても固定されたままになります。