We can make table scrollable by adding table-responsive class to it, but how can we loop it so that once the loop ends, first column will follow the last column as if it is the adjacent column. (this doesn't happen when we apply marquee)

We can make table scrollable by adding table-responsive class to it, but how can we loop it so that once the loop ends, first column will follow the last column as if it is the adjacent column. (this doesn't happen when we apply marquee)

• javascript
• jquery
• html
• css
• twitter-bootstrap-3

• Do u mean to freeze the 1st column and make the follow when ur scrolling? – Shank Commented Jun 29, 2016 at 18:22
• Sorry, no. I meant that I need to scroll the whole list in a loop, without any delay. – Sandeep C. Nath Commented Jun 29, 2016 at 18:25
• @Shank i think he wants something "like" a Carousel effect on the table. – Hozeis Commented Jun 29, 2016 at 18:25
• I believe bootstrap itself does not e with this functionality. Not sure of any libraries that are capable of doing this either. Try coding it yourself, post your code if you need help. – Hozeis Commented Jun 29, 2016 at 18:33

1 Answer 1

Im not sure this is what you were looking for, but it sounded like a cool idea. Heres what I came up with for a "Carousel Effect on a Table" (which is what i think you were asking). Run the code snippet to see the effect. You might need to alter the css a little to get a seamless scroll effect.

var $table = $('.table-wrapper table');

var leftTimeout, left = $('.left');

function scrollLeft(){
	$('.table-wrapper').scrollLeft($('.table-wrapper').scrollLeft()-50);
	$.each($table.find('tr'),function(){
		$(this).children().last().detach().prependTo(this);
	});
}

left.mousedown(function(){
	scrollLeft();
    leftTimeout = setInterval(function(){
    	scrollLeft();
    }, 500);

    return false;
});
$(document).mouseup(function(){
    clearInterval(leftTimeout);
    return false;
});

var rightTimeout, right = $('.right');

function scrollRight(){
	$('.table-wrapper').scrollLeft($('.table-wrapper').scrollLeft()+50);
	$.each($table.find('tr'),function(){
		$(this).children().first().detach().appendTo(this);
	});
}

right.mousedown(function(){
	scrollRight();
    leftTimeout = setInterval(function(){
    	scrollRight();
    }, 500);

    return false;
});
$(document).mouseup(function(){
    clearInterval(rightTimeout);
    return false;
});

.table-wrapper
{    	
    border: 1px solid red;
    width: 200px;
    height: 150px;        
    overflow:hidden;
}

table
{
    border: 1px solid black;
    margin-right: 20px;
}

td
{
    min-width: 50px;
    height: 20px;
    background-color: #ccc;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="table-wrapper">
    <table>
        <tr>
        	<th>1h</th>
            <th>2h</th>
            <th>3h</th>
            <th>4h</th>
            <th>5h</th>
            <th>6h</th>
            <th>7h</th>
            <th>8h</th>
            <th>9h</th>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
    </table>      
</div>

<button class='left'><</button>
<button class='right'>></button>