Edit in JSFiddle

$(document).ready(function() {
    $('#next').click(function(event) {
        event.preventDefault();
        $('.table').animate({scrollLeft:'+=152'}, 'slow');        
    });
    $('#pre').click(function(event) {
        event.preventDefault();
        $('.table').animate({scrollLeft:'-=152'}, 'slow');        
    });
});

.table {
    width:456px; 
    height:300px;
    border:solid 1px #ddd;
    background-color:#eee;
    overflow:hidden;
}

.slide {
    width:1064px; 
    height:300px;
    overflow:hidden;
}

.slide div {
    float:left;
    width:150px;
    height:300px;
    background-color:#eee;
    border:solid 1px #ddd;
}

<a id="pre" href="#"><<前へ</a>||
<a id="next" href="#">次へ>></a>
<div class="table">
    <div class="slide">
        <div id="col-1">
            <p>col-1 col-1 col-1 col-1 col-1 col-1 col-1 col-1 col-1 col-1 </p>
        </div>
        <div id="col-2">
            <p>col-2 col-2 col-2 col-2 col-2 col-2 col-2 col-2 col-2 col-2 </p>
        </div>
        <div id="col-3">
            <p>col-3 col-3 col-3 col-3 col-3 col-3 col-3 col-3 col-3 col-3 </p>
        </div>
        <div id="col-4">
            <p>col-4 col-4 col-4 col-4 col-4 col-4 col-4 col-4 col-4 col-4 </p>
        </div>
        <div id="col-5">
            <p>col-5 col-5 col-5 col-5 col-5 col-5 col-5 col-5 col-5 col-5 </p>
        </div>
        <div id="col-6">
            <p>col-6 col-6 col-6 col-6 col-6 col-6 col-6 col-6 col-6 col-6 </p>
        </div>
        <div id="col-7">
            <p>col-7 col-7 col-7 col-7 col-7 col-7 col-7 col-7 col-7 col-7 </p>
        </div>
    </div>
</div>