JSFiddle - React, Tailwind, and code Playground
HTML
<table class="wikitable" style="margin-right:1em;float:right">
<thead><tr>
<th style="background: white; ; border-bottom: 1px silver solid">Mužstvo</th>
<th style="background: white; ; border-bottom: 1px silver solid">Počet Stanley Cupů</th>
</tr></thead>
<tbody><tr>
<td><span class="flagicon" style=""><a href="/w/index.php?title=Soubor:Flag_of_Canada.svg&page=1" class="image" title="Kanada"><img alt="Kanada" src="//upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Flag_of_Canada.svg/22px-Flag_of_Canada.svg.png" width="22" height="11" class="thumbborder" /></a></span> <a href="/wiki/Montreal_Canadiens" title="Montreal Canadiens">Montreal Canadiens</a></td>
<td>24</td>
</tr>
<tr>
<td><span class="flagicon" style=""><a href="/w/index.php?title=Soubor:Flag_of_Canada.svg&page=1" class="image" title="Kanada"><img alt="Kanada" src="//upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Flag_of_Canada.svg/22px-Flag_of_Canada.svg.png" width="22" height="11" class="thumbborder" /></a></span> <a href="/wiki/Toronto_Maple_Leafs" title="Toronto Maple Leafs">Toronto Maple Leafs</a></td>
<td>13</td>
</tr>
<tr>
<td><span class="flagicon" style=""><a href="/w/index.php?title=Soubor:Flag_of_the_United_States.svg&page=1" class="image" title="USA"><img alt="USA" src="//upload.wikimedia.org/wikipedia/commons/thumb/a/a4/Flag_of_the_United_States.svg/22px-Flag_of_the_United_States.svg.png" width="22" height="12" class="thumbborder" /></a></span> <a href="/wiki/Detroit_Red_Wings" title="Detroit Red Wings">Detroit Red Wings</a></td>
<td>11</td>
</tr>
<tr>
<td><span class="flagicon" style=""><a href="/w/index.php?title=Soubor:Flag_of_the_United_States.svg&page=1" class="image" title="USA"><img alt="USA" src="//upload.wikimedia.org/wikipedia/commons/thumb/a/a4/Flag_of_the_United_States.svg/22px-Flag_of_the_United_States.svg.png" width="22" height="12" class="thumbborder" /></a></span> <a href="/wiki/Boston_Bruins" title="Boston Bruins">Boston...
JavaScript
/**
* Make table body scrollable, with the table header always visible.
* Table shrinks vertically to fit the browser viewport.
*
* requirements:
* - jQuery framework required (tested with 1.6.2)
* - header must be wrapped in <thead> element
*
* warnings:
* - table <caption> is not supported
* - using with header including <input>s is not adviced
*
* @author Vlasta Neubauer [[email protected]]
* @license public domain
*
* @param object table element (DOM or jQuery)
* @param int minimal table height (optional)
* @param int maximal table height (optional)
* @return object table container
*/
function makeScrollable(table, minHeight, maxHeight) {
var $ = jQuery;
// fuck IE7 and older
if ($.browser.msie && parseInt($.browser.version) < 8) return;
table = $(table);
// scrolling container
table.wrap("<div>");
var container = table.parent();
container.css({ 'display': 'inline-block', 'border': 'none', 'padding': 0 });
container.attr('class', table.attr('class'));
container.css({ // cannot copy 'margin' (IE, FF, Webkit)
'marginTop': table.css('marginTop'), 'marginRight': table.css('marginRight'),
'marginBottom': table.css('marginBottom'), 'marginLeft': table.css('marginLeft') });
table.css({ 'margin': 0 });
var bottom = table;
if (!parseInt(bottom.css('borderBottomWidth')))
var bottom = table.find("tr:last").find("th, td");
container.css({ // cannot copy 'borderBottom' (IE, FF)
'borderBottomWidth': bottom.css('borderBottomWidth'),
'borderBottomColor': bottom.css('borderBottomColor'),
'borderBottomStyle': bottom.css('borderBottomStyle') });
bottom.css({ 'borderBottom': 'none' });
// fake header
var head = table.find("thead").clone(true);
head.css({ 'display': 'block', 'position': 'absolute' });
head.find("th:not(:last-child), td:not(:last-child)").css({ 'borderRight': 'none' });
...