Make permanent position of arrow with CSS without affect text alignment from table cell

Question

I have an HTML table like:

<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>

in header, I have an hidden up arrow which appears when at mouseover/mouseout with 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>

where no-display is display:none css.

The screenshots (before)

enter image description here

And after:

enter image description here

I want that header title to not be moved at mouseover/mouseout event.

How to do that ? Maybe is a CSS trick.

PS: Maybe like:

enter image description here

Thanks for your patience with me that I have no more knowledge in CSS.

score 1 · Accepted Answer · answered Jul 03 '12 at 11:35

1

I'm not entirely sure why you're using an image to create the arrow, which then leads to the alignment problems; if you use text() to create a textual arrow, the infamous unicode upwards pointing triangle, then the alignment will maintain itself:

$('.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 Fiddle demo.

answered Jul 03 '12 at 11:35

David Thomas

249,100
51
377
410

There could be thousands of reasons to use something else than a textual element (even if this remains a good practice)... – Anto Jul 03 '12 at 11:38
1

There could be, and there are, but without explanation as to *why* I still remain 'unsure.' I'm not intending to discount the validity of using images for this, but it seems unnecessarily complicated to do so, given that it leads to problems that using text neatly avoids. – David Thomas Jul 03 '12 at 11:40
@DavidThomas, I just used ASCII Code in this [**SO Answer**](http://stackoverflow.com/a/11307273/1195891) for a 5 Star Rating System. It serves it's purpose well with no CSS to boot! – arttronics Jul 03 '12 at 11:41

score 0 · Answer 2 · answered Jul 03 '12 at 11:27

0

Make these changes

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

Now, it will remanin fixed even when your arrow appears.

answered Jul 03 '12 at 11:27

Ashwin Singh

7,197
4
36
55

score 0 · Answer 3 · edited May 23 '17 at 11:48

0

Use a CSS property to get it out of the html flow; either position: absolute or float: right.

edited May 23 '17 at 11:48

Community

1
1

answered Jul 03 '12 at 11:31

Anto

6,806
8
43
65

Make permanent position of arrow with CSS without affect text alignment from table cell

3 Answers3