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>

☷✎

How-to create table scroll to left & right with button in html

Comments

Post a Comment

Meta keywords generator tool for Blogger

Custom permalink creator for blogger

Create direct download link for google drive file online

blogger meta description generator

How to keep input value if user change current page in blogger

How-to create table scroll to left & right with button in html

Related

Comments

Post a Comment