<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" >
<HTML>
<meta http-equiv= "Content-type" content= "TEXT/HTML;CHARSET=GBK" >
<HEAD>
<TITLE> Scrolling Tables </TITLE>
<!--CSS style is locking the head of the table is not moving--
<style type= "Text/css" >
. table{
width:100%;
left:30%;
Border-collapse:collapse;
border-spacing:0;
}
. fixedthead{
Display:block;
width:100%;
}
. scrolltbody{
Display:block;
height:316px;
Overflow:hidden;
width:100%;
}
. table TD {
width:300px;
Border-bottom: #333 1px dashed;
padding:5px;
}
. Table th {
width:300px;
Border-bottom: #333 1px dashed;
Border-top: #333 1px dashed;
padding:5px;
line-height:24px;
}
. Table tr{
Border-bottom: #333 1px dashed;
line-height:24px;
padding:5px;
}
Thead.fixedthead TR Th:last-child {
Color: #FF0000;
}
</style>
<script language= "JavaScript" >
Add a row at the end of the table, then populate the first row with the data in the newly added row, and then delete the first row of the table.
function change (table) {
var row = Table.insertrow (table.rows.length);//Add a row at the end of table, Table.rows.length is the total number of rows in the table
for (j=0;j<table.rows[0].cells.length;j++) {//loops the data for all cells in the first row, so that it is added to the last new row of data (note that the subscript is starting from 0)
var cell = Row.insertcell (j);//Add a cell to the newly inserted row
Cell.height = "24px";//the height of a cell is the same as the line-height height in a CSS style
cell.innerhtml = table.rows[0].cells[j].innerhtml;//Sets the contents of the new cell, which, if desired, sets itself
}
Table.deleterow (0);//delete the first row of table
};
function Tableinterval () {
var table = document.getElementById ("test");//Get Table
Change (table);//execute the table change function, delete the first row, and finally add a row, like line scrolling
};
SetInterval ("Tableinterval ()", 2000);//Perform a change function every 2 seconds, equivalent to table scrolling up
</SCRIPT>
</HEAD>
<body align= "center" >
<table class= "table" align= "Center" >
<thead class= "Fixedthead" align= "Center" >
<tr>
<th> name </th><th> sex </th><th> age </th>
</tr>
</thead>
<tbody id= "test" class= "Scrolltbody" align= "Center" >
<tr>
<td> Zhang San </td><td> men </td><td>18</td>
</tr>
<tr>
<td> John Doe </td><td> men </td><td>20</td>
</tr>
<tr>
<td> Wang Xin </td><td> women </td><td>19</td>
</tr>
<tr>
<td> Lijia </td><td> Women </td><td>21</td>
</tr>
<tr>
<td> Zhang San </td><td> men </td><td>18</td>
</tr>
<tr>
<td> John Doe </td><td> men </td><td>20</td>
</tr>
<tr>
<td> Wang Xin </td><td> women </td><td>19</td>
</tr>
<tr>
<td> Lijia </td><td> Women </td><td>21</td>
</tr>
<tr>
<td> Zhang San </td><td> men </td><td>18</td>
</tr>
<tr>
<td> John Doe </td><td> men </td><td>20</td>
</tr>
<tr>
<td> Wang Xin </td><td> women </td><td>19</td>
</tr>
<tr>
<td> Lijia </td><td> Women </td><td>21</td>
</tr>
<tr>
<td> Zhang San </td><td> men </td><td>18</td>
</tr>
<tr>
<td> John Doe </td><td> men </td><td>20</td>
</tr>
<tr>
<td> Wang Xin </td><td> women </td><td>19</td>
</tr>
<tr>
<td> Lijia </td><td> Women </td><td>21</td>
</tr>
<tr>
<td> Zhang San </td><td> men </td><td>18</td>
</tr>
<tr>
<td> John Doe </td><td> men </td><td>20</td>
</tr>
<tr>
<td> Wang Xin </td><td> women </td><td>19</td>
</tr>
<tr>
<td> Lijia </td><td> Women </td><td>21</td>
</tr>
<tr>
<td> Zhang San </td><td> men </td><td>18</td>
</tr>
<tr>
<td> John Doe </td><td> men </td><td>20</td>
</tr>
<tr>
<td> Wang Xin </td><td> women </td><td>19</td>
</tr>
<tr>
<td> Lijia </td><td> Women </td><td>21</td>
</tr>
<tr>
<td> Zhang San </td><td> men </td><td>18</td>
</tr>
<tr>
<td> John Doe </td><td> men </td><td>20</td>
</tr>
<tr>
<td> Wang Xin </td><td> women </td><td>19</td>
</tr>
<tr>
<td> Lijia </td><td> Women </td><td>21</td>
</tr>
</tbody>
</table>
</BODY>
</HTML>
http://blog.csdn.net/fy573060627/article/details/48181099
Table row Loop scrolling example in HTML