Hi there 77713,
I do not have any of the problems which you mentioned in my test browsers…
IE11, Firefox 68, Chrome 75 or Vivaldi 2.6. 
Which of your browser(s) are having problems?
Here is the amended code for cell clicking…
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>table stuff</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
body {
background-color: #f9f9f9;
font: normal 1em / 1.5em BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
}
table {
border-collapse: collapse;
background-color: #fff;
}
td {
padding: 0.4em;
border: 1px solid #999;
cursor:pointer
}
td:hover, td:active , .match {
background-color: #fc9;
}
.match1{
background-color: #9ce;
}
</style>
</head>
<body>
<h2>Table One</h2>
<table id="table1">
<tbody>
<tr>
<td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td><td>j</td>
</tr>
<tr>
<td>k</td><td>l</td><td>m</td><td>n</td><td>o</td><td>p</td><td>q</td><td>r</td><td>s</td><td>t</td>
</tr>
<tr>
<td>u</td><td>v</td><td>w</td><td>x</td><td>y</td><td>z</td><td>1</td><td>2</td><td>3</td><td>4</td>
</tr>
<tr>
<td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>0</td><td>!</td><td>@</td><td>£</td>
</tr>
<tr>
<td>$</td><td>%</td><td>^</td><td>&</td><td>*</td><td>(</td><td>)</td><td>!</td><td>-</td><td>+</td>
</tr>
</tbody>
</table>
<h2>Table two</h2>
<table id="table2">
<tbody>
<tr>
<td>a</td><td>%</td><td>e</td><td>&</td><td>*</td><td>(</td><td>)</td><td>h</td><td>-</td><td>+</td>
</tr>
<tr>
<td>5</td><td>6</td><td>p</td><td>8</td><td>n</td><td>0</td><td>!</td><td>z</td><td>£</td><td>?</td>
</tr>
<tr>
<td>k</td><td>4</td><td>m</td><td>9</td><td>o</td><td>7</td><td>q</td><td>r</td><td>s</td><td>w</td>
</tr>
<tr>
<td>u</td><td>v</td><td>t</td><td>x</td><td>y</td><td>@</td><td>1</td><td>2</td><td>3</td><td>l</td>
</tr>
<tr>
<td>$</td><td>b</td><td>c</td><td>d</td><td>^</td><td>f</td><td>g</td><td>!</td><td>i</td><td>j</td>
</tr>
</tbody>
</table>
<script>
(function( d ) {
'use strict';
var c, k, cont, el, td1, td2, num1, n2, ary1 = [], ary2 = [],
t1 = d.getElementById( 'table1' ),
t2 = d.getElementById( 'table2' ),
tr1 = t1.querySelectorAll( 'tr' ),
tr2 = t2.querySelectorAll( 'tr' );
for ( c = 0; c < tr1.length; c ++ ) {
td1 = tr1[ c ].querySelectorAll( 'td' );
td2 = tr2[ c ].querySelectorAll( 'td' );
for ( k = 0; k < td1.length; k ++ ) {
num1 = c + k + ( td1.length - 1 ) * c ;
ary1[ num1 ] = true;
ary2[ num1 ] = true;
td1[ k ].addEventListener( 'mouseover', testIt( c, tr2[ c ], td1[ k ], num1, 's1'), false );
td2[ k ].addEventListener( 'mouseover', testIt( c, tr1[ c ], td2[ k ], num1, 's2' ), false );
}
}
function testIt( x, tr, td, n1, swap) {
td.onmouseover = function() {
cont = td.textContent;
for ( k = 0; k < td2.length; k ++ ) {
if ( tr.children.item( k ).textContent === cont ) {
tr.children.item( k ).classList.add( 'match' );
el = tr.children.item( k );
n2 = x * 10 + k ;
td.onmouseout = function() {
el.classList.remove( 'match' );
}
}
}
}
td.onclick = function() {
if ( swap === 's2' ) {
n1 = n2;
}
if ( ary1[ n1 ] == true ) {
this.classList.add( 'match1' );
el.classList.add( 'match1' );
ary1[ n1 ] = false;
ary2[ n2 ] = false;
}
else {
this.classList.remove( 'match1' );
el.classList.remove( 'match1' );
ary1[ n1 ] = true;
ary2[ n2 ] = true;
}
}
}
}( document ));
</script>
</body>
</html>
Bear in mind that javascript is not really my forte, so the gurus here
may be able to provide you with better methods for your project. 
coothead
