diff --git a/templates/index.html.ep b/templates/index.html.ep
index c4e0d9f..719cb5a 100644
--- a/templates/index.html.ep
+++ b/templates/index.html.ep
@@ -4,11 +4,35 @@
 	  <title>DeReKo-Word-Vector-Distances: <%= $word %></title>
     <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
     <script src="http://code.jquery.com/jquery-latest.min.js"></script>
+  <script src = "https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
+  <script src = "https://cdn.datatables.net/fixedcolumns/3.2.3/js/dataTables.fixedColumns.min.js"></script>
+  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
     <script
        src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
        integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
        crossorigin="anonymous"></script>
     <script>
+$(document).ready(function() {
+    $("#tabs").tabs( {
+        "show": function(event, ui) {
+            var oTable = $('div.dataTables_scrollBody>table.display', ui.panel).dataTable();
+            if ( oTable.length > 0 ) {
+                oTable.fnAdjustColumnSizing();
+            }
+        }
+    } );
+
+    $('#firsttable').DataTable({
+        "sScrollY": "800px",
+        "bScrollCollapse": true,
+        "bPaginate": false,
+        "bJQueryUI": true,
+        "dom": '<"top">rt<"bottom"flp><"clear">',
+        "aoColumnDefs": [
+            { "sWidth": "10%", "aTargets": [ -1 ] }
+        ]
+    } );
+});
      $(function() {
        $( document ).tooltip({
 			   content: function() {
@@ -16,6 +40,7 @@
 			   }}
 		   )
 	   })
+
     </script>
 	  <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
 	  <script src="/derekovecs/js/tsne.js"></script>
@@ -58,7 +83,15 @@
        color: red;
        fill: red;
      }
-     
+
+table.display {
+    width: 40% important!;
+    margin: 0;  /* <- works for me this way ****/
+}
+table.dataTable thead th, table.dataTable thead td, table.dataTable tbody td {
+  padding: 2px 2px;
+//  border-bottom: 1px solid #111;
+}
      #collocators {
        margin-bottom: 15px;
      }
@@ -339,21 +372,24 @@
       <span>  </span><input type="button" value="→ KorAP" onclick="queryKorAP();" title="query word with KorAP"/>
 	  </form>
 	  <br>
+   <div id="mytable"/>
 	  % if($lists && (@$lists) > 0 && (@$lists)[0]) {
 	    <div id="wrapper">
-		    <table id="first">
+        <div id="first" style="width:400px">
+		    <table class="display compact nowrap" id="firsttable">
+          <thead>
 			    <tr>
 				    <th align="right">#</th><th align="right">cos</th><th align="left">paradigmatic</th>
             % if($collocators) {
-				    <th title="The window around the target word that is considered for summation.">w'</th>
-						<th align="center" title="Raw (max.) activation of the collocator in the output layers.">a</th>
-						<th title="Σp(c<sub><small>@</small></sub>) – Sum of the probability approximations that the combination of the target word and the collocator at the relative position @ come from the training corpus. Single approximations can be distorted because of sub-sampling frequent words and the sum cannot itself be interpreted as probability."align="center">Σp</th>
-<!--
+				    <th align="right" title="The window around the target word that is considered for summation.">w'</th>
+						<th align="right" title="Raw (max.) activation of the collocator in the output layers.">a</th>
+						<th title="Σp(c<sub><small>@</small></sub>) – Sum of the probability approximations that the combination of the target word and the collocator at the relative position @ come from the training corpus. Single approximations can be distorted because of sub-sampling frequent words and the sum cannot itself be interpreted as probability." align="right">Σp</th>
 						<th align="right">Σp/|w|</th>
--->
 						<th title="c" align="left">collocator</th>
 				    % }
 			    </tr>
+         </thead>
+         <tbody>
 			    % my $j=0; my @words; my @vecs; my @ranks; my @marked;
           % for my $list (@$lists) {
 			      % my $i=0; while($list) {
@@ -402,13 +438,10 @@
 				          <td align="right">
   				          <%= sprintf("%.3e", $c->{norm}) %>
 				          </td>
-<!--
 				          <td align="right">
   				          <%= sprintf("%.3e", $c->{sum}) %>
 				          </td>
--->
 				          <td align="left">
-<!--  				          <a href="<%= url_with->query([word => $c->{word}]) =%>" -->
   				          <a onclick="<%= sprintf("queryKorAPCII('%s /w5 %s')", $c->{word}, $word) =%>"
                        title="freq. rank: <%= $c->{rank} =%>">
                       <%= $c->{word} %>
@@ -417,13 +450,17 @@
                   <td colspan="5"/>
                 % }
 			        </tr>
+             % last if($i >= 100);
 			      % }
 		      % }
+          </tbody>
 		    </table>
+</div>
 		    <script>
 		     % use Mojo::ByteStream 'b';
          % my $urlprefix = url_with->query([word=>'']);
 		     $(window).load(function() {
+			     showTable(<%= b(Mojo::JSON::to_json([@$collocators])) %>);
 			     showMap(<%= b(Mojo::JSON::to_json({target => " $word ", mergedEnd=> $mergedEnd, words => \@words, vecs => \@vecs, ranks => \@ranks, marked => \@marked, urlprefix => $urlprefix})); %>);
 		     });
         </script>