Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Make table auto scroll vertically via HTML & CSS

Tags:

html

css

twitter-bootstrap

I have a simple bootstrap table that I am trying to have vertically scroll automatically. The reason for this, is that the table will be displayed on a screen and the table could have 10 items in it or 100. So I would like it to auto scroll vertically so the user does not have to do it manually. After it reaches the end, it will just reset and start back from the top...

This is my markup thus far:

<div class="table-responsive" style="height: 700px; overflow: auto;">
    <table class="table table-bordered table-hover">
        <thead>
            <tr>
                <th style="text-align: left; font-size: 23px;">#</th>
                <th style="text-align: left; font-size: 23px;">Name</th>
                <th style="text-align: left; font-size: 23px;">Description</th>
                <th style="text-align: left; font-size: 23px;">Date</th>
            </tr>
        </thead>
        <tbody>  
            <tr class="danger">
                <td style="text-align: left; font-size: 16px;">1213</td>
                <td style="text-align: left; font-size: 16px;">John Doe</td>
                <td style="text-align: left; font-size: 16px;">my short description</td>
                <td style="text-align: left; font-size: 16px;">Today's Date</td>
            </tr> 
       </tbody>
   </table>
</div>

NOTE: I am hoping this can be achevied with only HTML and CSS.

Any suggestions?

like image 842
Code Avatar asked Apr 26 '16 19:04

Code

3 Answers

JS (or jQuery) is needed to get the actual element height and scrollHeight and perform the animation on those values

var $el = $(".table-responsive");
function anim() {
  var st = $el.scrollTop();
  var sb = $el.prop("scrollHeight")-$el.innerHeight();
  $el.animate({scrollTop: st<sb/2 ? sb : 0}, 4000, anim);
}
function stop(){
  $el.stop();
}
anim();
$el.hover(stop, anim);
.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;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="table-responsive">
  <table class="table table-bordered table-hover">
    <thead>
      <tr><th>#</th></tr>
    </thead>
    <tbody>  
      <tr><td>1</td></tr>
      <tr><td>2</td></tr> 
      <tr><td>3</td></tr> 
      <tr><td>4</td></tr> 
      <tr><td>5</td></tr> 
      <tr><td>6</td></tr> 
      <tr><td>7</td></tr> 
      <tr><td>8</td></tr> 
      <tr><td>9</td></tr> 
      <tr><td>10</td></tr> 
    </tbody>
  </table>
</div>
like image 133
Roko C. Buljan Avatar answered Oct 09 '22 20:10

Roko C. Buljan

I highly recommend using using javascript for this. I tried this using CSS only once and then promptly abandoned the idea, but it is theoretically possible. The following demo is not tested on all browsers, has huge compatibility issues, and was the jankiest thing ever on Safari. Moral of the story: use javascript.

@import url(https://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);}
}
<div class="table-responsive">
  <table class="table table-bordered table-hover">
    <thead>
      <tr>
        <th style="text-align: left; font-size: 23px;">#</th>
        <th style="text-align: left; font-size: 23px;">Name</th>
        <th style="text-align: left; font-size: 23px;">Description</th>
        <th style="text-align: left; font-size: 23px;">Date</th>
        <th style="text-align: left; font-size: 23px;">Date</th>
        <th style="text-align: left; font-size: 23px;">Date</th>
        <th style="text-align: left; font-size: 23px;">Date</th>
        <th style="text-align: left; font-size: 23px;">Date</th>
      </tr>
    </thead>
    <tbody>  
      <tr class="danger">
        <td style="text-align: left; font-size: 16px;">1213</td>
        <td style="text-align: left; font-size: 16px;">John Doe</td>
        <td style="text-align: left; font-size: 16px;">my short description</td>
        <td style="text-align: left; font-size: 16px;">Today's Date</td>
        <td style="text-align: left; font-size: 16px;">Today's Date</td>
        <td style="text-align: left; font-size: 16px;">Today's Date</td>
        <td style="text-align: left; font-size: 16px;">Today's Date</td>
        <td style="text-align: left; font-size: 16px;">Today's Date</td>
      </tr> 
    </tbody>
  </table>
</div> 

<div class="table-responsive">
  <table class="table table-bordered table-hover">
    <thead>
      <tr>
        <th style="text-align: left; font-size: 23px;">#</th>
        <th style="text-align: left; font-size: 23px;">Name</th>
        <th style="text-align: left; font-size: 23px;">Description</th>
        <th style="text-align: left; font-size: 23px;">Date</th>
      </tr>
    </thead>
    <tbody>  
      <tr class="danger">
        <td style="text-align: left; font-size: 16px;">1213</td>
        <td style="text-align: left; font-size: 16px;">John Doe</td>
        <td style="text-align: left; font-size: 16px;">my short description</td>
        <td style="text-align: left; font-size: 16px;">Today's Date</td>
      </tr> 
    </tbody>
  </table>
</div>
like image 43
Joseph Marikle Avatar answered Oct 09 '22 21:10

Joseph Marikle

The code below will not reset and start back from the top the table as asked in the question, but this will help some future readers who trying to scroll and loop the table rows automatically with a fixed header.

<!DOCTYPE html>
    <html>
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    	    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    	<script type="text/javascript">
    	$.fn.infiniteScrollUp=function(){
    		var self=this,kids=self.children()
    		kids.slice(20).hide()
    		setInterval(function(){
    			kids.filter(':hidden').eq(0).fadeIn()
    			kids.eq(0).fadeOut(function(){
    				$(this).appendTo(self)
    				kids=self.children()
    			})
    		},1000)
    		return this
    	}
    	$(function(){
    		$('tbody').infiniteScrollUp()
    	})
    	</script>
    	<title>infiniteScrollUp</title>
    </head>
    <body>
    <table>
    <colgroup><col /><col /><col /><col /><col /><col /></colgroup>
    <thead>
    <tr><th>a</th><th>b</th><th>c</th><th>d</th><th>e</th><th>f</th></tr>
    </thead>
    <tbody>
    <tr><td>1a</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1b</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1c</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1d</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1e</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1f</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1g</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1h</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1i</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1j</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1k</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1l</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1m</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1n</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1o</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1p</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1q</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1r</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1s</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1t</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1u</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1v</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1w</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1x</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1y</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>1z</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
    </tbody>
    </table>
    </body>
    </html>
like image 39
Bino Kochumol Varghese Avatar answered Oct 09 '22 21:10

Bino Kochumol Varghese
Sign in to Comment

Related questions

C# Owin WebApp: Parsing POST Requests?
Render JSON into HTML
StackEdit Icons
How to get all table ids inside a div using jquery
Center <td> using bootstrap
:before :after not working on the input type submit? [duplicate]
How to wrap long text inside a div without scroll
remove space between two td elements in a table
Bootstrap Selectpicker will not reset using built-in functions
Two HTML-select boxes linked to each other
window.open() should open the link in same tab
Bootstrap Navbar Collapse not closing on Click
How to limit the characters displayed in a <td> entry in AngularJS [duplicate]
Stop HighCharts increasing width of line on hover
CSS bouncing line loader animation
option selected not working from AngularJS template
How to disable page scroll while dragging draggable in jquery?
how to Pass variable in link to the django view
Material design icons, how to center them as text?
Reversing an SVG Path

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!