jQuery solution to display visual-scroll-cue if table has more than X amount of td elements.

[thm-design]

Here is another option to add a visual cue. I only want to display the visual cue if scrolling is really necessary when there are several td elements. In my case after 3 ths.

1 ) JQuery that adds a div with a bg-image(visual cue) via css to the responsive table

$("table.responsive").each(function(){
    if ( $("th", this).length > 3) {
        $(this).before("<div style='position:relative;'><span class='MobiScroll'></span></div>");
    }
});

2. CSS to position the div (this goes in the mobile media query )

.MobiScroll {
    background-image: url(image.png);
    width: 62px;
    height: 38px;
    display: block;
    position: absolute;
    bottom: 30px;
    right: 0;
}

Here is a fiddle: http://jsfiddle.net/design4lifeblog/SetvX/