html:

<div class="box">

<table class="table1">

<thead>

<tr>

<th>11111111111</th>

<th>222222222</th>

<th>333333333</th>

<th>444444444</th>

</tr>

</thead>

</table>

<div class="hide">

<table class="table2">

<tr>

<td>1111111111111</td>

<td>22222222222</td>

<td>33333333333</td>

<td>44444444444</td>

<! -- 省略。。。。-->

</tr>

</table>

</div>

</div>

---

css:

.hide {

width: 1030px;

height: 150px;

overflow: hidden;

}

.table2 {

position: relative;

border-top: none;

border-bottom: none !important;

}

---

js

引入jq库

var num = 0, timer3;

function table() {

timer3 = setInterval(function() {

// num 每行的高度

num += 20;

// if 里面的高度是要减去重复的高度

if(num == 300) {

num = 20;

$('.table2').css('top', 0 + 'px');

}

$('.table2').animate({top: -num+'px'}, 500,"linear",function (){});

}, 1000)

}

table();