How-to create table scroll to left & right with button in html in this example we learn how-to create table scroll to left & right with button in html using CSS and JavaScript <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> #t-output{ scroll-behavior: smooth; } body { font-family: Arial, Helvetica, sans-serif; font-size: 20px; } #myBtn2 { display: ; float:right; } #myBtn { display: ; float:left; } #myBtn:hover { background-color: #555; } </style> </head> <body> <div > <button onclick="topFunction()" id="myBtn" title="Go to top">right</button> <button onclick="topFunction2()" id="myBtn2" title="Go to top">left</button> </div> <div id="t-output" > <style> tr:first-child {background: white;color: black;}tbody {background: white;color: black;}tr:nth-child(2n+0) {} #t-output{overflow-x:auto;text-align: center;}#t-output td{padding:5px;white-space:nowrap;cursor:context-menu}#t-output td:hover{background:#383838;color:#fff} </style> <table border="1"> <tbody><tr><td>cell 0,0</td><td>cell 1,0</td><td>cell 2,0</td><td>cell 3,0</td><td>cell 4,0</td><td>cell 5,0</td><td>cell 6,0</td><td>cell 7,0</td><td>cell 8,0</td><td>cell 9,0</td><td>cell 10,0</td><td>cell 11,0</td><td>cell 12,0</td><td>cell 13,0</td><td>cell 14,0</td></tr> <tr><td>cell 0,1</td><td>cell 1,1</td><td>cell 2,1</td><td>cell 3,1</td><td>cell 4,1</td><td>cell 5,1</td><td>cell 6,1</td><td>cell 7,1</td><td>cell 8,1</td><td>cell 9,1</td><td>cell 10,1</td><td>cell 11,1</td><td>cell 12,1</td><td>cell 13,1</td><td>cell 14,1</td></tr> <tr><td>cell 0,2</td><td>cell 1,2</td><td>cell 2,2</td><td>cell 3,2</td><td>cell 4,2</td><td>cell 5,2</td><td>cell 6,2</td><td>cell 7,2</td><td>cell 8,2</td><td>cell 9,2</td><td>cell 10,2</td><td>cell 11,2</td><td>cell 12,2</td><td>cell 13,2</td><td>cell 14,2</td></tr> <tr><td>cell 0,3</td><td>cell 1,3</td><td>cell 2,3</td><td>cell 3,3</td><td>cell 4,3</td><td>cell 5,3</td><td>cell 6,3</td><td>cell 7,3</td><td>cell 8,3</td><td>cell 9,3</td><td>cell 10,3</td><td>cell 11,3</td><td>cell 12,3</td><td>cell 13,3</td><td>cell 14,3</td></tr> <tr><td>cell 0,4</td><td>cell 1,4</td><td>cell 2,4</td><td>cell 3,4</td><td>cell 4,4</td><td>cell 5,4</td><td>cell 6,4</td><td>cell 7,4</td><td>cell 8,4</td><td>cell 9,4</td><td>cell 10,4</td><td>cell 11,4</td><td>cell 12,4</td><td>cell 13,4</td><td>cell 14,4</td></tr> </tbody></table> </div> <script> function topFunction() { document.getElementById("t-output").scrollLeft= 0; } function topFunction2() { var ee =document.getElementById("t-output").scrollWidth; document.getElementById("t-output").scrollLeft+=ee; }; </script> </body> </html> © Manajmnt code Share to : ☷✎ Comments
Comments
Post a Comment
message