Membuat tabel di php

Sebelumnya mungkin anda sudah melihat tutorial bagaimana membuat tabel berjalan dari bawah ke atas atau sebaliknya di artikel saya sebelumnya di sini : .
Pada kali ini saya akan bebagi cara membuat tabel berjalan part 2 dengan bentuk yang berbeda. Berikut adalah source code nya :

Membuat Baris Table Berjalan Dari Kiri Ke kanan


@import url[//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css];

.table-responsive {
  overflow-x: hidden;
}

table.table {
  animation: ani linear 1s alternate infinite;
}

.table-responsive:hover {
  overflow: auto;
}
.table-responsive:hover table.table {
  animation: none ;
}

@keyframes ani {
	0% { margin-left: 0; transform: translate3d[0%, 0, 0];}
	25% { margin-left: 0; transform: translate3d[0%, 0, 0];}
	75% { margin-left: 100%; transform: translate3d[-100%, 0, 0];}
	100% { margin-left: 100%; transform: translate3d[-100%, 0, 0];}
}



  
        #
        Name
        Description
        Date
        Date
        Date
        Date
        Date
      

    

      

    
    
  
      

        
1213
        
John Doe
        
my short description
        
Today's Date
        
Today's Date
        
Today's Date
        
Today's Date
        
Today's Date
      
 
    
  
 


  
        #
        Name
        Description
        Date
      

    

      

    
    
  
      

        
1213
        
John Doe
        
my short description
        
Today's Date
      
 
    
  

LIHAT DEMO DI SINI

Demikian script untuk membuat tabel berjalan dari kiri ke kanan. Selamat mencoba.

Tabel dengan fitur berjalan dari atas ke bawah atau dari bawah ke atas seringkali kita jumpai dimana mana seperti papan informasi kantor, bandara, bank, dan lain-lain. Sebagai pengembang web atau aplikasi tentu kita memerlukan trik seperti ini bukan ? nah berikut adalah script yang bisa anda gunakan untuk membuat sebuah tabel tampil berjalan dari baris bawah ke atas atau sebaliknya. berikut adalah script nya :

Membuat tabel berjalan


.table-responsive{
  height:180px; width:50%;
  overflow-y: auto;
  border:2px solid #444;
}.table-responsive:hover{border-color:red;}
 
table{width:100%;}
td{padding:24px; background:#eee;}


var $el = $[".table-responsive"];
function anim[] {
  var st = $el.scrollTop[];
  var sb = $el.prop["scrollHeight"]-$el.innerHeight[];
  $el.animate[{scrollTop: st