<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
.main_1 {
/*border: 2px solid pink;*/
/*background: black;*/
margin-top: 30px;
}
.main_1 table {
border-collapse: collapse;
margin: 0px auto;
/*background: black;*/
/*color: white;*/
}
.main_1 thead,.main_1 tr,.main_1 th {
border: 2px solid red;
width: 70px;
height: 40px;
/*margin: 30px auto;*/
}
.main_2 table {
border-collapse: collapse;
margin: 0px auto;
text-align: center;
animation: mymove 8s linear infinite;
border-spacing: 0;
}
.main_2 tbody,.main_2 tr,.main_2 td {
border: 2px solid red;
width: 70px;
height: 40px;
/*margin: 0px auto;*/
/*margin-top: 30px;*/
/*border-spacing: 0;*/
}
.main_2 {
/*border: 2px solid purple;*/
overflow: hidden;
height: 200px;
}
@Keyframes mymove {
0% {
transform: translateY(0%);
}
to {
transform: translateY(-100%);
}
}
</style>
</head>
<body>
<div class="main_1">
<table>
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
</thead>
</table>
</div>
<div class="main_2">
<table>
<tbody>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>6</td>
<td>6</td>
<td>6</td>
</tr>
<tr>
<td>8</td>
<td>8</td>
<td>8</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>9</td>
<td>9</td>
<td>9</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>6</td>
<td>6</td>
<td>6</td>
</tr>
<tr>
<td>8</td>
<td>8</td>
<td>8</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>9</td>
<td>9</td>
<td>9</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>