Scroll Table Horizontally Automatically to Left (using HTML, CSS or JQuery)

Question

I have following table, I want whole to scroll horizontally automatically, like marquee scroll to right to left, without clicking any button. Is there any way to make scroll like marquee automatically using HTML, CSS or JQuery. Thank you.

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="table-responsive"> <table class="table" id="table" style="width: 100%;"> <tbody> <tr> <th rowspan="2" id="mkdth">Pool Size (unheated pool)</th> <th rowspan="2" id="mkdth">Surface Area</th> <th id="with" colspan="2">WITHOUT POOL COVER</th> <th id="with" colspan="2">WITH POLCO POOL COVER</th> </tr> <tr> <td rowspan="">Average Evaporation per Month (Feb-May)</td> <td>Average Evaporation per Day (Feb-May)</td> <td>Average Evaporation per Month (Feb-May)</td> <td>Average Evaporation per Day (Feb-May)</td> </tr> <tr> <td>8.0*4.0m</td> <td>32.0m2</td> <td>6018 litres</td> <td>66 litres</td> <td>485 litres</td> <td>5.4 litres</td> </tr> </tbody> </table> </div>

Answer 1

you need to use Marquee CSS for this, use animations of CSS to create this effect

refer: https://htmleditor.w3schools.in/?filename=html_css_scrolling_text_using_css

mostly you need to work with (transform: translateX(100%);) this.