h5+html引入scrollfix,css - How to add a scrollbar to an HTML5 table? - Stack Overflow

HTML :

↓ SCROLL ↓

Colonne 1Colonne 2Colonne 3

NonMaisAllo !NonMaisAllo !NonMaisAllo !NonMaisAllo !NonMaisAllo !NonMaisAllo !NonMaisAllo !NonMaisAllo !NonMaisAllo !NonMaisAllo !NonMaisAllo !NonMaisAllo !NonMaisAllo !NonMaisAllo !NonMaisAllo !NonMaisAllo !NonMaisAllo !NonMaisAllo !NonMaisAllo !NonMaisAllo !

↓ SCROLL MORE ↓

Colonne 1Colonne 2Colonne 3

NonMaisAllo !NonMaisAllo !NonMaisAllo !NonMaisAllo !NonMaisAllo !NonMaisAllo !NonMaisAllo !NonMaisAllo !NonMaisAllo !NonMaisAllo !NonMaisAllo !NonMaisAllo !NonMaisAllo !NonMaisAllo !NonMaisAllo !NonMaisAllo !NonMaisAllo !NonMaisAllo !NonMaisAllo !NonMaisAllo !NonMaisAllo !NonMaisAllo !NonMaisAllo !NonMaisAllo !NonMaisAllo !NonMaisAllo !NonMaisAllo !NonMaisAllo !NonMaisAllo !NonMaisAllo !NonMaisAllo !NonMaisAllo !NonMaisAllo !NonMaisAllo !NonMaisAllo !NonMaisAllo !NonMaisAllo !NonMaisAllo !NonMaisAllo !

↑ UP ↑

CSS:

body{

font:1.2em normal Arial,sans-serif;

color:#34495E;

}

h1{

text-align:center;

text-transform:uppercase;

letter-spacing:-2px;

font-size:2.5em;

margin:20px 0;

}

.container{

width:90%;

margin:auto;

}

table{

border-collapse:collapse;

width:100%;

}

.blue{

border:2px solid #1ABC9C;

}

.blue thead{

background:#1ABC9C;

}

.purple{

border:2px solid #9B59B6;

}

.purple thead{

background:#9B59B6;

}

thead{

color:white;

}

th,td{

text-align:center;

padding:5px 0;

}

tbody tr:nth-child(even){

background:#ECF0F1;

}

tbody tr:hover{

background:#BDC3C7;

color:#FFFFFF;

}

.fixed{

top:0;

position:fixed;

width:auto;

display:none;

border:none;

}

.scrollMore{

margin-top:600px;

}

.up{

cursor:pointer;

}

JS (jQuery):

;(function($) {

$.fn.fixMe = function() {

return this.each(function() {

var $this = $(this),

$t_fixed;

function init() {

$this.wrap('

$t_fixed = $this.clone();

$t_fixed.find("tbody").remove().end().addClass("fixed").insertBefore($this);

resizeFixed();

}

function resizeFixed() {

$t_fixed.find("th").each(function(index) {

$(this).css("width",$this.find("th").eq(index).outerWidth()+"px");

});

}

function scrollFixed() {

var offset = $(this).scrollTop(),

tableOffsetTop = $this.offset().top,

tableOffsetBottom = tableOffsetTop + $this.height() - $this.find("thead").height();

if(offset < tableOffsetTop || offset > tableOffsetBottom)

$t_fixed.hide();

else if(offset >= tableOffsetTop && offset <= tableOffsetBottom && $t_fixed.is(":hidden"))

$t_fixed.show();

}

$(window).resize(resizeFixed);

$(window).scroll(scrollFixed);

init();

});

};

})(jQuery);

$(document).ready(function(){

$("table").fixMe();

$(".up").click(function() {

$('html, body').animate({

scrollTop: 0

}, 2000);

});

});

For beginner programmer:

If you don't want to download and host jQuery yourself, you can include it from a CDN (Content Delivery Network).

Adding jQuery to Your Web Pages click here.

Reference: HERE