We Keep Coding

Display a table on hover for elements in multiple rows and columns

I am trying to display a table on hover for elements in rows and columns.
Note: The data in the rows and columns is also in an accordion.
The data is in 4 columns and can be any number of rows.
The data for each table to be displayed on hover contains 5 columns and can be any number of rows.
I have written the following CSS/HTML that displays all 4 columns of data (i.e. jockey name and number of rides) when the accordion is opened.
Note: Each of these elements will have an associated table to be displayed on hover.
As you will see, I managed to display the associated table for each element on hover in the first row, however, I have been unable to do the same for any of the subsequent elements in the remaining rows and columns.
Note: For testing purposes, I have intentionally left the highlighting of each element in 'red' when hovered.
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
.accordion {
background-color: #388070;
border: 1px;
border-bottom: 10px;
border-color: #f0f0f0;
border-radius: 3px;
border-style: solid;
border-width: 2px;
color: #ffffff;
cursor: pointer;
font-size: 12px;
font-weight: 400;
line-height: 1.2;
letter-spacing: 2px;
padding: 12px;
outline: none;
text-align: left;
transition: 0.4s;
width: 100%;
margin: auto !Important;
}
.active,
.accordion:hover {
background-color: transparent;
border: 1px;
border-color: #388070;
border-style: solid;
border-width: 2px;
color: #388070;
}
.accordion:after {
content: "\002B";
/* Unicode character for "plus" sign (+) */
color: #388070;
font-size: 12px;
float: right;
margin-left: 5px;
}
.active:after {
color: #388070;
content: "\2212";
/* Unicode character for "minus" sign (-) */
}
.panel5 {
border: 1px;
border-bottom: 10px;
border-color: #f0f0f0;
border-style: solid;
border-width: 2px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 25px;
display: none;
background-color: white;
overflow: hidden;
}
.column {
float: left;
width: 25%;
font-size: 7pt;
color: black;
font-family: Lato;
font-weight: normal;
line-height: 1.2;
background-color: white;
column-gap: 3px;
}
.myrow {
float: left;
width: 100%;
font-size: 7pt;
color: black;
font-family: Lato;
font-weight: normal;
line-height: 1.2;
background-color: white;
}
.myrow:after {
content: "";
display: table;
clear: both;
}
a:link,
a:visited {
background-color: transparent;
color: #07342a;
display: inline-block;
font-family: 'Lato', sans-serif;
font-size: 12px;
text-align: center;
text-decoration: none;
}
a:hover,
a:active {
background-color: transparent;
color: #303030;
font-weight: bold;
}
#jockeys {
border-collapse: collapse;
display: none;
font-family: 'Lato', sans-serif;
font-size: 12px;
width: 100%;
}
#jockeys td,
#jockeys th {
border: 1px solid #dddddd;
padding: 8px;
}
#jockeys th {
background-color: #07342a;
color: white;
font-family: 'Lato', sans-serif;
font-size: 12px;
letter-spacing: 1px;
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
}
#jockeys tr:nth-child(even) {
background-color: #f2f2f2;
}
#ShowJockey:hover+#jockeys {
display: block;
}
div.hoverPopUp {
border-collapse: collapse;
display: none;
font-family: 'Lato', sans-serif;
font-size: 9px;
text-align: center;
}
div.hoverPopUp td,
div.hoverPopUp th {
border: 1px solid #dddddd;
padding: 5px;
}
div.hoverPopUp th {
background-color: #07342a;
color: white;
font-family: 'Lato', sans-serif;
font-size: 9px;
font-weight: bold;
letter-spacing: 1px;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
}
a.hoverHereToPopUp {
background-color: white;
color: #07342a;
font-family: 'Lato', sans-serif;
font-size: 12px;
letter-spacing: 1px;
line-height: 1.2;
margin-top: 1em;
padding-top: 10px;
text-align: left;
}
a:hover,
a:active {
background-color: transparent;
color: red;
font-weight: bold;
}
a.hoverHereToPopUp:hover+div.hoverPopUp {
display: block;
}
table.center {
margin-left: auto;
margin-right: auto;
border-spacing: 1;
}
<button class="accordion">NUMBER OF RIDES PER JOCKEY (EXCLUDING SCRATCHINGS)</button>
<div class="panel5">
<div class="row">
<div class="column">
<a class="hoverHereToPopUp">ADAM HYERONIMUS HAS 5 RIDES.</a>
<div class="hoverPopUp">
<table class="center">
<tr>
<th>RACECOURSE</th>
<th>RACE NO.</th>
<th>RUNNER</th>
<th>TRAINER</th>
<th>TD RATING</th>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 1</td>
<td>ROCK AROUND THE CLOCK - ONE (8)</td>
<td>DAVID & BEN HAYES & TOM DABERNIG</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 2</td>
<td>PURE FUEGO - ONE(1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>
<font color="green"><b>AAA</b></font>
</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 3</td>
<td>ENTREAT - ONE (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 4</td>
<td>BIG FAT PURE FUEGO - ONE (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AAA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 5</td>
<td>ENTREAT - ONE (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 6</td>
<td>PURE FUEGO - ONE (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AAA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 7</td>
<td>ENTREAT - ONE (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 8</td>
<td>PURE FUEGO - ONE (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AAA</center>
</td>
</tr>
</table>
</div>
<p>
<p align="left" style="line-height: 16px letter-spacing: 1px;">
JAMES INNES JR. HAS 1 RIDE.
</p>
<p>
<p align="left" style="line-height: 16px letter-spacing: 1px;">
KERRIN MCEVOY HAS 6 RIDES.
</p>
<p>
<p align="left" style="line-height: 16px letter-spacing: 1px;">
SAM CLIPPERTON HAS 1 RIDE.
</p>
</div>
<div class="column">
<a class="hoverHereToPopUp">ANDREW ADKINS HAS 1 RIDE.</a>
<div class="hoverPopUp">
<table class="center">
<tr>
<th>RACECOURSE</th>
<th>RACE NO.</th>
<th>RUNNER</th>
<th>TRAINER</th>
<th>TD RATING</th>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 1</td>
<td>ROCK AROUND THE CLOCK - TWO (8)</td>
<td>DAVID & BEN HAYES & TOM DABERNIG</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 3</td>
<td>ENTREAT - TWO (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 5</td>
<td>ENTREAT - TWO (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
</table>
</div>
<p>
<p align="left" style="line-height:16px letter-spacing:6px;">
JAMES MCDONALD HAS 6 RIDES.
</p>
<p>
<p align="left" style="line-height:16px letter-spacing:6px;">
NASH RAWILLER HAS 1 RIDE.
</p>
<p>
<p align="left" style="line-height:16px letter-spacing:6px;">
TIM CLARK HAS 2 RIDES.
</p>
</div>
<div class="column">
<a class="hoverHereToPopUp">BRENTON AVDULLA HAS 2 RIDES.</a>
<div class="hoverPopUp">
<table class="center">
<tr>
<th>RACECOURSE</th>
<th>RACE NO.</th>
<th>RUNNER</th>
<th>TRAINER</th>
<th>TD RATING</th>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 1</td>
<td>ROCK AROUND THE CLOCK - THREE (8)</td>
<td>DAVID & BEN HAYES & TOM DABERNIG</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 2</td>
<td>PURE FUEGO - THREE (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>
<font color="green"><b>AAA</b></font>
</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 3</td>
<td>ENTREAT - THREE (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 8</td>
<td>PURE FUEGO - THREE (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AAA</center>
</td>
</tr>
</table>
</div>
<p>
<p align="left" style="line-height:16px letter-spacing:6px;">
JASON COLLETT HAS 3 RIDES.
</p>
<p>
<p align="left" style="line-height:16px letter-spacing:6px;">
RACHEL KING HAS 2 RIDES.
</p>
<p>
<p align="left" style="line-height:16px letter-spacing:6px;">
TOMMY BERRY HAS 3 RIDES.
</p>
</div>
<div class="column">
<a class="hoverHereToPopUp">GLEN BOSS HAS 2 RIDES.</a>
<div class="hoverPopUp">
<table class="center">
<tr>
<th>RACECOURSE</th>
<th>RACE NO.</th>
<th>RUNNER</th>
<th>TRAINER</th>
<th>TD RATING</th>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 1</td>
<td>ROCK AROUND THE CLOCK - FOUR (8)</td>
<td>DAVID & BEN HAYES & TOM DABERNIG</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 2</td>
<td>PURE FUEGO - FOUR (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>
<font color="green"><b>AAA</b></font>
</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 4</td>
<td>BIG FAT PURE FUEGO - FOUR (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AAA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 5</td>
<td>ENTREAT - FOUR (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 7</td>
<td>ENTREAT - FOUR (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
</table>
</div>
<p>
<p align="left" style="line-height:16px letter-spacing:6px;">
JEAN VAN OVERMEIRE (APPRENTICE) HAS 3 RIDES.
</p>
<p>
<p align="left" style="line-height:16px letter-spacing:6px;">
ROBBIE DOLAN HAS 4 RIDES.
</p>
<p>
<p align="left" style="line-height:16px letter-spacing:6px;">
</p>
</div>
</div>
</div>
If I attempt to add the same and code to the subsequent element(s) in the column DIV(s) (i.e. the elements currently contained within the paragraph tag, that should be row 2, row 3 and so on..., I lose the column structure & format, and the defined a href's are all misaligned and partially or completely hidden until hovered.
Note: The jockey names should appear in alphabetical order from left to right.
In addition but not as important as the aforementioned, it appears that the table displayed is limited to the width of the column. When I attempt to expand the width, the right side of the table gets hidden by the next column (table is behind columns to its right). I'd also like to know if there's a way to get around this and display the table "on top" (over) of the additional columns so I can expand the width.
Apologies for the length of the HTML but I think it's required for you to see what's going on.

An id cannot be used more than once on a page. So I replaced them with class. (#jockeys -> .jockeys, #ShowJockey -> .ShowJockey)
You cannot put div in a p tag. So we have to replace p tags with div.
In short, it is impossible to place a <div> element inside a <p> in
the DOM because the opening <div> tag will automatically close the <p>
element. Ref
I made a snippet.
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
.accordion {
background-color: #388070;
border: 1px;
border-bottom: 10px;
border-color: #f0f0f0;
border-radius: 3px;
border-style: solid;
border-width: 2px;
color: #ffffff;
cursor: pointer;
font-size: 12px;
padding: 12px;
outline: none;
text-align: left;
transition: 0.4s;
width: 100%;
margin: auto !Important;
}
.active,
.accordion:hover {
background-color: transparent;
border: 1px;
border-color: #388070;
border-style: solid;
border-width: 2px;
color: #388070;
}
.accordion:after {
content: "\002B";
/* Unicode character for "plus" sign (+) */
color: #388070;
font-size: 12px;
float: right;
margin-left: 5px;
}
.active:after {
color: #388070;
content: "\2212";
/* Unicode character for "minus" sign (-) */
}
.panel5 {
border: 1px;
border-bottom: 10px;
border-color: #f0f0f0;
border-style: solid;
border-width: 2px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 25px;
display: none;
background-color: white;
overflow: hidden;
}
.column {
float: left;
width: 25%;
font-size: 7pt;
color: black;
font-family: Lato;
font-weight: normal;
line-height: 1.2;
background-color: white;
column-gap: 3px;
}
.myrow {
float: left;
width: 100%;
font-size: 7pt;
color: black;
font-family: Lato;
font-weight: normal;
line-height: 1.2;
background-color: white;
}
.myrow:after {
content: "";
display: table;
clear: both;
}
a:link,
a:visited {
background-color: transparent;
color: #07342a;
display: inline-block;
font-family: 'Lato', sans-serif;
font-size: 12px;
text-align: center;
text-decoration: none;
}
a:hover,
a:active {
background-color: transparent;
color: #303030;
font-weight: bold;
}
.jockeys {
border-collapse: collapse;
display: none;
font-family: 'Lato', sans-serif;
font-size: 12px;
width: 100%;
}
.jockeys td,
.jockeys th {
border: 1px solid #dddddd;
padding: 8px;
}
.jockeys th {
background-color: #07342a;
color: white;
font-family: 'Lato', sans-serif;
font-size: 12px;
letter-spacing: 1px;
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
}
.jockeys tr:nth-child(even) {
background-color: #f2f2f2;
}
.ShowJockey:hover+.jockeys {
display: block;
}
.hoverPopUp {
border-collapse: collapse;
display: none;
font-family: 'Lato', sans-serif;
font-size: 9px;
text-align: center;
}
.hoverPopUp td,
.hoverPopUp th {
border: 1px solid #dddddd;
padding: 5px;
}
.hoverPopUp th {
background-color: #07342a;
color: white;
font-family: 'Lato', sans-serif;
font-size: 9px;
font-weight: bold;
letter-spacing: 1px;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
}
a.hoverHereToPopUp {
background-color: white;
color: #07342a;
font-family: 'Lato', sans-serif;
font-size: 12px;
letter-spacing: 1px;
line-height: 1.2;
text-align: left;
}
a:hover,
a:active {
background-color: transparent;
color: red;
font-weight: bold;
}
a.hoverHereToPopUp:hover+.hoverPopUp {
display: block;
}
table.center {
margin-left: auto;
margin-right: auto;
border-spacing: 1;
}
.parentDiv {
line-height: 16px;
letter-spacing: 1px;
padding-top: 10px;
text-align: left;
}
<button class="accordion">NUMBER OF RIDES PER JOCKEY (EXCLUDING SCRATCHINGS)</button>
<div class="panel5">
<div class="row">
<div class="column">
<a class="hoverHereToPopUp">hover here</a>
<div class='hoverPopUp'> <table class='center'> <tr> <th>RACECOURSE</th> <th>RACE NO.</th> <th>RUNNER</th> <th>TRAINER</th> <th>TD RATING</th> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 1</td> <td>ROCK AROUND THE CLOCK - ONE (8)</td> <td>DAVID & BEN HAYES & TOM DABERNIG</td> <td> <center>AA</center> </td> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 2</td> <td>PURE FUEGO - ONE(1)</td> <td>CAMERON CROCKETT</td> <td> <center> <font color='green'><b>AAA</b></font> </center> </td> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 3</td> <td>ENTREAT - ONE (8)</td> <td>CAMERON CROCKETT</td> <td> <center>AA</center> </td> </tr> </table> </div>
<div class="parentDiv">
<a href="#" class="hoverHereToPopUp" >JAMES INNES JR. HAS 1 RIDE.</a> <div class="parentDiv">
KERRIN MCEVOY HAS 6 RIDES.
</div>
<div class="parentDiv">
SAM CLIPPERTON HAS 1 RIDE.
</div>
</div>
</div>
<div class="column">
<a class="hoverHereToPopUp">ANDREW ADKINS HAS 1 RIDE.</a>
<div class="parentDiv">
hover here
<div class='hoverPopUp'> <table class='center'> <tr> <th>RACECOURSE</th> <th>RACE NO.</th> <th>RUNNER</th> <th>TRAINER</th> <th>TD RATING</th> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 1</td> <td>ROCK AROUND THE CLOCK - ONE (8)</td> <td>DAVID & BEN HAYES & TOM DABERNIG</td> <td> <center>AA</center> </td> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 2</td> <td>PURE FUEGO - ONE(1)</td> <td>CAMERON CROCKETT</td> <td> <center> <font color='green'><b>AAA</b></font> </center> </td> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 3</td> <td>ENTREAT - ONE (8)</td> <td>CAMERON CROCKETT</td> <td> <center>AA</center> </td> </tr> </table> </div>
</div>
<div class="parentDiv">
NASH RAWILLER HAS 1 RIDE.
</div>
<div class="parentDiv">
TIM CLARK HAS 2 RIDES.
</div>
</div>
<div class="column">
<a class="hoverHereToPopUp">BRENTON AVDULLA HAS 2 RIDES.</a>
<div class="parentDiv">
JASON COLLETT HAS 3 RIDES.
</div>
<div class="parentDiv">
RACHEL KING HAS 2 RIDES.
</div>
<div class="parentDiv">
TOMMY BERRY HAS 3 RIDES.
</div>
</div>
<div class="column">
<a class="hoverHereToPopUp">GLEN BOSS HAS 2 RIDES.</a>
<div class="parentDiv">
JEAN VAN OVERMEIRE (APPRENTICE) HAS 3 RIDES.
</div>
<div class="parentDiv">
ROBBIE DOLAN HAS 4 RIDES.
</div>
<div class="parentDiv">
</div>
</div>
</div>
</div>
Also here I show the tables with a much better method. But you have to give your tables with the data-hover-content attribute. See on 1. and 6. links.
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
const links = document.querySelectorAll(".hoverHereToPopUp");
[...links].forEach(link => {
link.addEventListener("mouseover", handleMouseOver);
link.addEventListener("mousemove", handleMouseMove);
link.addEventListener("mouseleave", handleMouseLeave);
});
function handlePosition(e) {
const ID = e.target.getAttribute("data-hover-id");
const wrapper = document.getElementById(ID);
let top = "";
if (!(e.target.getBoundingClientRect().top + wrapper.offsetHeight > innerHeight)) {
top = `${e.clientY + e.target.offsetHeight}px`;
} else {
top = `${e.clientY - (wrapper.offsetHeight + e.target.offsetHeight)}px`;
}
if (`${e.clientX -
wrapper.offsetWidth / 2}` <= 0) {
return `position: fixed; left: 0px; top:${top}`;
} else {
return `position: fixed; left: ${e.clientX -
wrapper.offsetWidth / 2}px; top:${top}`;
}
}
function handleMouseOver(e) {
const hoverContent = e.target.getAttribute("data-hover-content");
const ID = Math.random()
.toString(36)
.substr(2, 9);
const wrapper = document.createElement("DIV");
e.target.setAttribute("data-hover-id", ID);
wrapper.setAttribute("data-hover-wrapper", "");
wrapper.setAttribute("id", ID);
wrapper.setAttribute("style", "opacity: 0; transform: scale(.8)");
wrapper.innerHTML = hoverContent;
document.body.append(wrapper);
wrapper.setAttribute("style", handlePosition(e));
}
function handleMouseLeave(e) {
const ID = e.target.getAttribute("data-hover-id");
document.getElementById(ID).style.opacity = 0;
document.getElementById(ID).style.transform = "scale(.8)";
setTimeout(() => {
document.getElementById(ID).remove();
}, 150);
}
function handleMouseMove(e) {
const ID = e.target.getAttribute("data-hover-id");
const wrapper = document.getElementById(ID);
wrapper.setAttribute("style", handlePosition(e));
}
window.addEventListener('scroll', () => {
const wrapper = document.querySelector('[data-hover-wrapper]');
if (wrapper) wrapper.remove();
});
.accordion {
background-color: #388070;
border: 1px;
border-bottom: 10px;
border-color: #f0f0f0;
border-radius: 3px;
border-style: solid;
border-width: 2px;
color: #ffffff;
cursor: pointer;
font-size: 12px;
font-weight: 400;
line-height: 1.2;
letter-spacing: 2px;
padding: 12px;
outline: none;
text-align: left;
transition: 0.4s;
width: 100%;
margin: auto !Important;
}
.active,
.accordion:hover {
background-color: transparent;
border: 1px;
border-color: #388070;
border-style: solid;
border-width: 2px;
color: #388070;
}
.accordion:after {
content: "\002B";
/* Unicode character for "plus" sign (+) */
color: #388070;
font-size: 12px;
float: right;
margin-left: 5px;
}
.active:after {
color: #388070;
content: "\2212";
/* Unicode character for "minus" sign (-) */
}
.panel5 {
border: 1px;
border-bottom: 10px;
border-color: #f0f0f0;
border-style: solid;
border-width: 2px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 25px;
display: none;
background-color: white;
overflow: hidden;
}
.column {
float: left;
width: 25%;
font-size: 7pt;
color: black;
font-family: Lato;
font-weight: normal;
line-height: 1.2;
background-color: white;
column-gap: 3px;
}
.myrow {
float: left;
width: 100%;
font-size: 7pt;
color: black;
font-family: Lato;
font-weight: normal;
line-height: 1.2;
background-color: white;
}
.myrow:after {
content: "";
display: table;
clear: both;
}
a:link,
a:visited {
background-color: transparent;
color: #07342a;
display: inline-block;
font-family: 'Lato', sans-serif;
font-size: 12px;
text-align: center;
text-decoration: none;
}
a:hover,
a:active {
background-color: transparent;
color: #303030;
font-weight: bold;
}
.jockeys {
border-collapse: collapse;
display: none;
font-family: 'Lato', sans-serif;
font-size: 12px;
width: 100%;
}
.jockeys td,
.jockeys th {
border: 1px solid #dddddd;
padding: 8px;
}
.jockeys th {
background-color: #07342a;
color: white;
font-family: 'Lato', sans-serif;
font-size: 12px;
letter-spacing: 1px;
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
}
.jockeys tr:nth-child(even) {
background-color: #f2f2f2;
}
.ShowJockey:hover+.jockeys {
display: block;
}
.hoverPopUp {
border-collapse: collapse;
font-family: 'Lato', sans-serif;
font-size: 9px;
text-align: center;
background-color: #fff;
}
.hoverPopUp td,
.hoverPopUp th {
border: 1px solid #dddddd;
padding: 5px;
}
.hoverPopUp th {
background-color: #07342a;
color: white;
font-family: 'Lato', sans-serif;
font-size: 9px;
font-weight: bold;
letter-spacing: 1px;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
}
a.hoverHereToPopUp {
background-color: white;
color: #07342a;
font-family: 'Lato', sans-serif;
font-size: 12px;
letter-spacing: 1px;
line-height: 1.2;
text-align: left;
}
a:hover,
a:active {
background-color: transparent;
color: red;
font-weight: bold;
}
table.center {
margin-left: auto;
margin-right: auto;
border-spacing: 1;
}
[data-hover-wrapper] {
transition: opacity .3s, transform .3s
}
.parentDiv {
line-height: 16px;
letter-spacing: 1px;
padding-top: 10px;
text-align: left;
}
<button class="accordion">NUMBER OF RIDES PER JOCKEY (EXCLUDING SCRATCHINGS)</button>
<div class="panel5">
<div class="row">
<div class="column">
<a class="hoverHereToPopUp" data-hover-content="<div class='hoverPopUp'> <table class='center'> <tr> <th>RACECOURSE</th> <th>RACE NO.</th> <th>RUNNER</th> <th>TRAINER</th> <th>TD RATING</th> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 1</td> <td>ROCK AROUND THE CLOCK - ONE (8)</td> <td>DAVID & BEN HAYES & TOM DABERNIG</td> <td> <center>AA</center> </td> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 2</td> <td>PURE FUEGO - ONE(1)</td> <td>CAMERON CROCKETT</td> <td> <center> <font color='green'><b>AAA</b></font> </center> </td> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 3</td> <td>ENTREAT - ONE (8)</td> <td>CAMERON CROCKETT</td> <td> <center>AA</center> </td> </tr> </table> </div>">hover here
</a>
<div class="parentDiv">
<a href="#" class="hoverHereToPopUp" >JAMES INNES JR. HAS 1 RIDE.</a>
</div>
<div class="parentDiv">
KERRIN MCEVOY HAS 6 RIDES.
</div>
<div class="parentDiv">
SAM CLIPPERTON HAS 1 RIDE.
</div>
</div>
<div class="column">
<a class="hoverHereToPopUp">ANDREW ADKINS HAS 1 RIDE.</a>
<div class="parentDiv">
hover here
</div>
<div class="parentDiv">
NASH RAWILLER HAS 1 RIDE.
</div>
<div class="parentDiv">
TIM CLARK HAS 2 RIDES.
</div>
</div>
<div class="column">
<a class="hoverHereToPopUp">BRENTON AVDULLA HAS 2 RIDES.</a>
<div class="parentDiv">
JASON COLLETT HAS 3 RIDES.
</div>
<div class="parentDiv">
RACHEL KING HAS 2 RIDES.
</div>
<div class="parentDiv">
TOMMY BERRY HAS 3 RIDES.
</div>
</div>
<div class="column">
<a class="hoverHereToPopUp">GLEN BOSS HAS 2 RIDES.</a>
<div class="parentDiv">
JEAN VAN OVERMEIRE (APPRENTICE) HAS 3 RIDES.
</div>
<div class="parentDiv">
ROBBIE DOLAN HAS 4 RIDES.
</div>
<div class="parentDiv">
</div>
</div>
</div>
</div>
I compressed the table's code because Stackoverflow snippets does not allow to too much code.
Here's an another example. (I think best) This works with click.
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function () {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
const links = document.querySelectorAll(".hoverHereToPopUp");
[...links].forEach((link) => {
link.addEventListener("click", handleClick);
});
function handlePosition(e) {
const ID = e.target.getAttribute("data-hover-id");
const wrapper = document.getElementById(ID);
if (`${e.target.getBoundingClientRect().left}` <= 0) {
return `position: fixed; left: 0px; top:${
e.target.getBoundingClientRect().top + 20
}`;
} else {
return `position: fixed; left: ${
e.target.getBoundingClientRect().left
}px; top:${e.target.getBoundingClientRect().top + 20}px`;
}
}
function handleClick(e) {
const others = document.querySelectorAll("[data-hover-wrapper]");
others.forEach((p) => {
p.style.opacity = 0;
p.style.transform = "scale(.8)";
setTimeout(() => {
p.remove();
}, 150);
});
const hoverContent = e.target.getAttribute("data-hover-content");
const ID = Math.random().toString(36).substr(2, 9);
const wrapper = document.createElement("DIV");
e.target.setAttribute("data-hover-id", ID);
wrapper.setAttribute("data-hover-wrapper", "");
wrapper.setAttribute("id", ID);
wrapper.setAttribute("style", "opacity: 0; transform: scale(.8)");
wrapper.innerHTML = hoverContent;
document.body.append(wrapper);
wrapper.setAttribute("style", handlePosition(e));
}
document.addEventListener("click", (e) => {
const specifiedElement = document.querySelectorAll("[data-hover-wrapper]");
specifiedElement.forEach((p) => {
let isClickInside = p.contains(event.target);
if (
!isClickInside &&
!event.target.classList.contains("hoverHereToPopUp")
) {
const others = document.querySelectorAll("[data-hover-wrapper]");
others.forEach((p) => {
p.style.opacity = 0;
p.style.transform = "scale(.8)";
setTimeout(() => {
p.remove();
}, 150);
});
}
});
});
/* I minified the css because stackoverflow does not allow to over 30000 character body. this css same with the above snippet.*/
.accordion{background-color:#388070;border:1px;border-bottom:10px;border-color:#f0f0f0;border-radius:3px;border-style:solid;border-width:2px;color:#fff;cursor:pointer;font-size:12px;font-weight:400;line-height:1.2;letter-spacing:2px;padding:12px;outline:0;text-align:left;transition:.4s;width:100%;margin:auto!important}.accordion:hover,.active{background-color:transparent;border:1px;border-color:#388070;border-style:solid;border-width:2px;color:#388070}.accordion:after{content:"\002B";color:#388070;font-size:12px;float:right;margin-left:5px}.active:after{color:#388070;content:"\2212"}.panel5{border:1px;border-bottom:10px;border-color:#f0f0f0;border-style:solid;border-width:2px;padding-top:5px;padding-right:5px;padding-bottom:5px;padding-left:25px;display:none;background-color:#fff;overflow:hidden}.column{float:left;width:25%;font-size:7pt;color:#000;font-family:Lato;font-weight:400;line-height:1.2;background-color:#fff;column-gap:3px}.myrow{float:left;width:100%;font-size:7pt;color:#000;font-family:Lato;font-weight:400;line-height:1.2;background-color:#fff}.myrow:after{content:"";display:table;clear:both}a:link,a:visited{background-color:transparent;color:#07342a;display:inline-block;font-family:Lato,sans-serif;font-size:12px;text-align:center;text-decoration:none}a:active,a:hover{background-color:transparent;color:#303030;font-weight:700}.jockeys{border-collapse:collapse;display:none;font-family:Lato,sans-serif;font-size:12px;width:100%}.jockeys td,.jockeys th{border:1px solid #ddd;padding:8px}.jockeys th{background-color:#07342a;color:#fff;font-family:Lato,sans-serif;font-size:12px;letter-spacing:1px;padding-top:12px;padding-bottom:12px;text-align:left}.jockeys tr:nth-child(even){background-color:#f2f2f2}.ShowJockey:hover+.jockeys{display:block}.hoverPopUp{border-collapse:collapse;font-family:Lato,sans-serif;font-size:9px;text-align:center;background-color:#fff}.hoverPopUp td,.hoverPopUp th{border:1px solid #ddd;padding:5px}.hoverPopUp th{background-color:#07342a;color:#fff;font-family:Lato,sans-serif;font-size:9px;font-weight:700;letter-spacing:1px;padding-top:5px;padding-bottom:5px;text-align:center}a.hoverHereToPopUp{background-color:#fff;color:#07342a;font-family:Lato,sans-serif;font-size:12px;letter-spacing:1px;line-height:1.2;text-align:left}a:active,a:hover{background-color:transparent;color:red;font-weight:700}table.center{margin-left:auto;margin-right:auto;border-spacing:1}[data-hover-wrapper]{transition:opacity .3s,transform .3s}.parentDiv{line-height:16px;letter-spacing:1px;padding-top:10px;text-align:left}
<button class="accordion">NUMBER OF RIDES PER JOCKEY (EXCLUDING SCRATCHINGS)</button>
<div class="panel5">
<div class="row">
<div class="column">
<a class="hoverHereToPopUp" data-hover-content="<div class='hoverPopUp'> <table class='center'> <tr> <th>RACECOURSE</th> <th>RACE NO.</th> <th>RUNNER</th> <th>TRAINER</th> <th>TD RATING</th> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 1</td> <td>ROCK AROUND THE CLOCK - ONE (8)</td> <td>DAVID & BEN HAYES & TOM DABERNIG</td> <td> <center>AA</center> </td> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 2</td> <td>PURE FUEGO - ONE(1)</td> <td>CAMERON CROCKETT</td> <td> <center> <font color='green'><b>AAA</b></font> </center> </td> </tr> <tr> <td>SANDOWN-HILLSIDE</td> <td>RACE 3</td> <td>ENTREAT - ONE (8)</td> <td>CAMERON CROCKETT</td> <td> <center>AA</center> </td> </tr> </table> </div>">click here
</a>
<div class="parentDiv">
<a href="#" class="hoverHereToPopUp" >JAMES INNES JR. HAS 1 RIDE.</a>
</div>
<div class="parentDiv">
KERRIN MCEVOY HAS 6 RIDES.
</div>
<div class="parentDiv">
SAM CLIPPERTON HAS 1 RIDE.
</div>
</div>
<div class="column">
<a class="hoverHereToPopUp">ANDREW ADKINS HAS 1 RIDE.</a><div class="parentDiv">
click here
</div>
<div class="parentDiv">
NASH RAWILLER HAS 1 RIDE.
</div>
<div class="parentDiv">
TIM CLARK HAS 2 RIDES.
</div>
</div>
<div class="column">
<a class="hoverHereToPopUp">BRENTON AVDULLA HAS 2 RIDES.</a>
<div class="parentDiv">
JASON COLLETT HAS 3 RIDES.
</div>
<div class="parentDiv">
RACHEL KING HAS 2 RIDES.
</div>
<div class="parentDiv">
TOMMY BERRY HAS 3 RIDES.
</div>
</div>
<div class="column">
<a class="hoverHereToPopUp">GLEN BOSS HAS 2 RIDES.</a>
<div class="parentDiv">
JEAN VAN OVERMEIRE (APPRENTICE) HAS 3 RIDES.
</div>
<div class="parentDiv">
ROBBIE DOLAN HAS 4 RIDES.
</div>
<div class="parentDiv">
</div>
</div>
</div>
</div>

I reckon I have found another possible solution to your problem. With this solution, contrary to the other also great answers, there is no separate 'hover me' or 'click me' button. Just hover over a cell and view the associated table.
I have cleaned up and changed your html code a bit to make it a <table>. Which comes with a lot of benefits such as a nice and clean structure.
Now, each individual data cell in the .overall table has an attribute onmouseover="showDetail(this.id)"so that, when you hover over the element it fires that function and passes the id (Jockey-#) to the function showDetail.
This function first sets the opacity of all the other cells to 0.3 to make the .hoverPopUp stand more out to the background. Next, the opacity of the hovered cell is set to 1. So that users know what the table is about.
Then the x and y position of the cell itself are calculated to set the position of the detailTable just below the selected cell.
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
function showDetail(jockeyId) {
setClassOpacity("hoverHereToPopUp", 0.3);
//get the selected cell
var jockeyCell = document.getElementById(jockeyId);
let jockeyDetailId = jockeyId + '-detail';
jockeyCell.style.opacity = 1;
jockeyCell.onmouseout = function() {
if (detail = document.getElementById(jockeyDetailId)) {
detail.style.display = "none";
}
setClassOpacity("hoverHereToPopUp", 1);
}
//get the relative parent of each cell
// cell <tr> <tbody> <table> <div id="panel-#">
var jockeyParent = jockeyCell.parentElement.parentElement.parentElement.parentElement;
//calculate the position of the selected cell
let cellPos = {};
//get the position relative to it's parent
let bodyRect = jockeyParent.getBoundingClientRect();
let jockeyRect = jockeyCell.getBoundingClientRect();
cellPos.x = jockeyRect.left - bodyRect.left;
cellPos.y = jockeyRect.top - bodyRect.top;
//set position of ".hoverPopUp" thus the detail tabe
var dataDiv = document.getElementById(jockeyDetailId);
if (!dataDiv) {
//no table specified so create an empty one just for now
let temporaryTable = `<div class="hoverPopUp" id="${jockeyDetailId}">
<table class="jockeys">
<tr>
<th>RACECOURSE</th>
<th>RACE NO.</th>
<th>RUNNER</th>
<th>TRAINER</th>
<th>TD RATING</th>
</tr>
<tr>
<td>No data</td>
<td>No data</td>
<td>No data</td>
<td>No data</td>
<td>No data</td>
</tr>
</table>
</div>`;
jockeyParent.innerHTML += temporaryTable;
dataDiv = document.getElementById(jockeyDetailId);
}
if (cellPos.x < bodyRect.width / 2) {
dataDiv.style.left = 0;
} else {
dataDiv.style.right = 0;
}
dataDiv.style.top = (cellPos.y + 1.5 * jockeyRect.height) + "px";
dataDiv.style.display = "block";
}
//set the opacity of all the other elements lower to increase clarity and readability
function setClassOpacity(className, opacity) {
var cells = document.getElementsByClassName(className);
for (var i = 0; i < cells.length; i++) {
var cell = cells[i];
cell.style.opacity = opacity;
}
}
.accordion {
background-color: #388070;
border: 2px solid #f0f0f0 border-bottom: 10px;
color: #ffffff;
cursor: pointer;
font-size: 12px;
font-weight: 400;
line-height: 1.2;
letter-spacing: 2px;
padding: 12px;
outline: none;
text-align: left;
transition: 0.4s;
width: 100%;
margin: auto !Important;
}
.accordion:first-child {
display: block;
}
.active,
.accordion:hover {
background-color: transparent;
border: 1px;
border-color: #388070;
border-style: solid;
border-width: 2px;
color: #388070;
}
.accordion:after {
content: "\002B";
/* Unicode character for "plus" sign (+) */
color: #388070;
font-size: 12px;
float: right;
margin-left: 5px;
}
.active:after {
color: #388070;
content: "\2212";
/* Unicode character for "minus" sign (-) */
}
/* Renamed .panel5 to .panel */
/* Each panel has now an id of #panel-# */
.panel {
border: 2px solid #f0f0f0;
border-bottom: 10px;
padding: 5px 5px 5px 25px;
display: none;
background-color: white;
position: relative;
width: 95%;
height: auto;
margin-left: auto;
margin-right: auto;
}
.panel:first-child {
display: block;
}
.overall {
border-collapse: collapse;
width: 90%;
}
.overall td {
font-size: 9pt;
color: black;
font-family: Lato;
font-weight: normal;
line-height: 1.2;
background-color: white;
padding: 5px;
}
.overall tr {
font-size: 7pt;
color: black;
font-family: 'Lato';
font-weight: normal;
line-height: 1.2;
background-color: white;
}
/* Default table styles above*/
.hoverPopUp {
display: none;
padding: 10px;
background-color: white;
border: 1px solid #ccc;
border-radius: 5px;
position: absolute;
font-family: 'Lato', sans-serif;
font-size: 9px;
text-align: center;
/* Adds some depth and clarity */
z-index: 5 !important;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
/* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
-moz-box-shadow: 3px 3px 5px 6px #ccc;
/* Firefox 3.5 - 3.6 */
box-shadow: 3px 3px 5px 6px #ccc;
}
.jockeys {
margin-left: auto;
margin-right: auto;
border-spacing: 1;
border-collapse: collapse;
font-family: 'Lato', sans-serif;
font-size: 12px;
width: 100%;
}
.jockeys td,
.jockeys th {
border: 1px solid #dddddd;
padding: 8px;
}
.jockeys th {
background-color: #07342a;
color: white;
font-family: 'Lato', sans-serif;
font-size: 12px;
letter-spacing: 1px;
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
}
.jockeys tr:nth-child(even) {
background-color: #f2f2f2;
}
<body>
<h3>Some nice data</h3>
<button class="accordion">NUMBER OF RIDES PER JOCKEY (EXCLUDING SCRATCHINGS)</button>
<div class="panel" id="panel-1">
<table class="overall">
<tbody>
<tr>
<td id="Jockey-1" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">ADAM HYERONIMUS HAS 5 RIDES.</td>
<td id="Jockey-2" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">JAMES INNES JR. HAS 1 RIDE.</td>
<td id="Jockey-3" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">KERRIN MCEVOY HAS 6 RIDES.</td>
<td id="Jockey-4" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">SAM CLIPPERTON HAS 1 RIDE.</td>
</tr>
<tr>
<td id="Jockey-5" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">ANDREW ADKINS HAS 1 RIDE.</td>
<td id="Jockey-6" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">JAMES MCDONALD HAS 6 RIDES.</td>
<td id="Jockey-7" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">NASH RAWILLER HAS 1 RIDE.</td>
<td id="Jockey-8" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">TIM CLARK HAS 2 RIDES.</td>
</tr>
<tr>
<td id="Jockey-9" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">BRENTON AVDULLA HAS 2 RIDES.</td>
<td id="Jockey-10" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">JASON COLLETT HAS 3 RIDES.</td>
<td id="Jockey-11" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">RACHEL KING HAS 2 RIDES.</td>
<td id="Jockey-12" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">TOMMY BERRY HAS 3 RIDES.</td>
</tr>
<tr>
<td id="Jockey-13" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">GLEN BOSS HAS 2 RIDES.</td>
<td id="Jockey-14" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">JEAN VAN OVERMEIRE (APPRENTICE) HAS 3 RIDES.</td>
<td id="Jockey-15" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">ROBBIE DOLAN HAS 4 RIDES.</td>
<td id="Jockey-16" class="hoverHereToPopUp"></td>
</tr>
</tbody>
</table>
<div class="hoverPopUp" id="Jockey-1-detail">
<table class="jockeys">
<tr>
<th>RACECOURSE</th>
<th>RACE NO.</th>
<th>RUNNER</th>
<th>TRAINER</th>
<th>TD RATING</th>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 1</td>
<td>ROCK AROUND THE CLOCK - ONE (8)</td>
<td>DAVID & BEN HAYES & TOM DABERNIG</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 2</td>
<td>PURE FUEGO - ONE(1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>
<font color="green"><b>AAA</b></font>
</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 3</td>
<td>ENTREAT - ONE (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 4</td>
<td>BIG FAT PURE FUEGO - ONE (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AAA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 5</td>
<td>ENTREAT - ONE (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 6</td>
<td>PURE FUEGO - ONE (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AAA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 7</td>
<td>ENTREAT - ONE (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 8</td>
<td>PURE FUEGO - ONE (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AAA</center>
</td>
</tr>
</table>
</div>
<div class="hoverPopUp" id="Jockey-6-detail">
<table class="jockeys">
<tr>
<th>RACECOURSE</th>
<th>RACE NO.</th>
<th>RUNNER</th>
<th>TRAINER</th>
<th>TD RATING</th>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 1</td>
<td>ROCK AROUND THE CLOCK - TWO (8)</td>
<td>DAVID & BEN HAYES & TOM DABERNIG</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 3</td>
<td>ENTREAT - TWO (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 5</td>
<td>ENTREAT - TWO (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
</table>
</div>
<div class="hoverPopUp" id="Jockey-11-detail">
<table class="jockeys">
<tr>
<th>RACECOURSE</th>
<th>RACE NO.</th>
<th>RUNNER</th>
<th>TRAINER</th>
<th>TD RATING</th>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 1</td>
<td>ROCK AROUND THE CLOCK - THREE (8)</td>
<td>DAVID & BEN HAYES & TOM DABERNIG</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 2</td>
<td>PURE FUEGO - THREE (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>
<font color="green"><b>AAA</b></font>
</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 3</td>
<td>ENTREAT - THREE (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 8</td>
<td>PURE FUEGO - THREE (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AAA</center>
</td>
</tr>
</table>
</div>
<div class="hoverPopUp" id="Jockey-13-detail">
<table class="jockeys">
<tr>
<th>RACECOURSE</th>
<th>RACE NO.</th>
<th>RUNNER</th>
<th>TRAINER</th>
<th>TD RATING</th>
</tr>
<tr>
No data available
</tr>
</table>
</div>
<div class="hoverPopUp" id="Jockey-14-detail">
<table class="jockeys">
<tr>
<th>RACECOURSE</th>
<th>RACE NO.</th>
<th>RUNNER</th>
<th>TRAINER</th>
<th>TD RATING</th>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 1</td>
<td>ROCK AROUND THE CLOCK - FOUR (8)</td>
<td>DAVID & BEN HAYES & TOM DABERNIG</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 2</td>
<td>PURE FUEGO - FOUR (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>
<font color="green"><b>AAA</b></font>
</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 4</td>
<td>BIG FAT PURE FUEGO - FOUR (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AAA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 5</td>
<td>ENTREAT - FOUR (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 7</td>
<td>ENTREAT - FOUR (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
</table>
</div>
</div>
<p>Well well more data</p>
<button class="accordion">NUMBER OF RIDES PER JOCKEY (EXCLUDING SCRATCHINGS)</button>
<div class="panel" id="panel-2">
<table class="overall">
<tbody>
<tr>
<td id="Jockey-17" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">ADAM HYERONIMUS HAS 5 RIDES.</td>
<td id="Jockey-18" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">JAMES INNES JR. HAS 1 RIDE.</td>
<td id="Jockey-19" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">KERRIN MCEVOY HAS 6 RIDES.</td>
<td id="Jockey-20" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">SAM CLIPPERTON HAS 1 RIDE.</td>
</tr>
<tr>
<td id="Jockey-21" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">ANDREW ADKINS HAS 1 RIDE.</td>
<td id="Jockey-22" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">JAMES MCDONALD HAS 6 RIDES.</td>
<td id="Jockey-23" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">NASH RAWILLER HAS 1 RIDE.</td>
<td id="Jockey-24" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">TIM CLARK HAS 2 RIDES.</td>
</tr>
<tr>
<td id="Jockey-25" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">BRENTON AVDULLA HAS 2 RIDES.</td>
<td id="Jockey-26" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">JASON COLLETT HAS 3 RIDES.</td>
<td id="Jockey-27" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">RACHEL KING HAS 2 RIDES.</td>
<td id="Jockey-28" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">TOMMY BERRY HAS 3 RIDES.</td>
</tr>
<tr>
<td id="Jockey-29" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">GLEN BOSS HAS 2 RIDES.</td>
<td id="Jockey-30" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">JEAN VAN OVERMEIRE (APPRENTICE) HAS 3 RIDES.</td>
<td id="Jockey-31" class="hoverHereToPopUp" onmouseover="showDetail(this.id);">ROBBIE DOLAN HAS 4 RIDES.</td>
<td id="Jockey-32" class="hoverHereToPopUp"></td>
</tr>
<tbody>
</table>
<div class="hoverPopUp" id="Jockey-17-detail">
<table class="jockeys">
<tr>
<th>RACECOURSE</th>
<th>RACE NO.</th>
<th>RUNNER</th>
<th>TRAINER</th>
<th>TD RATING</th>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 1</td>
<td>ROCK AROUND THE CLOCK - ONE (8)</td>
<td>DAVID & BEN HAYES & TOM DABERNIG</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 2</td>
<td>PURE FUEGO - ONE(1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>
<font color="green"><b>AAA</b></font>
</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 3</td>
<td>ENTREAT - ONE (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 4</td>
<td>BIG FAT PURE FUEGO - ONE (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AAA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 5</td>
<td>ENTREAT - ONE (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 6</td>
<td>PURE FUEGO - ONE (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AAA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 7</td>
<td>ENTREAT - ONE (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 8</td>
<td>PURE FUEGO - ONE (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AAA</center>
</td>
</tr>
</table>
</div>
<div class="hoverPopUp" id="Jockey-22-detail">
<table class="jockeys">
<tr>
<th>RACECOURSE</th>
<th>RACE NO.</th>
<th>RUNNER</th>
<th>TRAINER</th>
<th>TD RATING</th>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 1</td>
<td>ROCK AROUND THE CLOCK - TWO (8)</td>
<td>DAVID & BEN HAYES & TOM DABERNIG</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 3</td>
<td>ENTREAT - TWO (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 5</td>
<td>ENTREAT - TWO (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
</table>
</div>
<div class="hoverPopUp" id="Jockey-28-detail">
<table class="jockeys">
<tr>
<th>RACECOURSE</th>
<th>RACE NO.</th>
<th>RUNNER</th>
<th>TRAINER</th>
<th>TD RATING</th>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 1</td>
<td>ROCK AROUND THE CLOCK - THREE (8)</td>
<td>DAVID & BEN HAYES & TOM DABERNIG</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 2</td>
<td>PURE FUEGO - THREE (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>
<font color="green"><b>AAA</b></font>
</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 3</td>
<td>ENTREAT - THREE (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 8</td>
<td>PURE FUEGO - THREE (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AAA</center>
</td>
</tr>
</table>
</div>
<div class="hoverPopUp" id="Jockey-32-detail">
<table class="jockeys">
<tr>
<th>RACECOURSE</th>
<th>RACE NO.</th>
<th>RUNNER</th>
<th>TRAINER</th>
<th>TD RATING</th>
</tr>
<tr>
No data available
</tr>
</table>
</div>
<div class="hoverPopUp" id="Jockey-30-detail">
<table class="jockeys">
<tr>
<th>RACECOURSE</th>
<th>RACE NO.</th>
<th>RUNNER</th>
<th>TRAINER</th>
<th>TD RATING</th>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 1</td>
<td>ROCK AROUND THE CLOCK - FOUR (8)</td>
<td>DAVID & BEN HAYES & TOM DABERNIG</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 2</td>
<td>PURE FUEGO - FOUR (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>
<font color="green"><b>AAA</b></font>
</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 4</td>
<td>BIG FAT PURE FUEGO - FOUR (1)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AAA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 5</td>
<td>ENTREAT - FOUR (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
<tr>
<td>SANDOWN-HILLSIDE</td>
<td>RACE 7</td>
<td>ENTREAT - FOUR (8)</td>
<td>CAMERON CROCKETT</td>
<td>
<center>AA</center>
</td>
</tr>
</table>
</div>
</div>
<br><br><br><br><br><br>
</body>
Btw, where do you get this data from? If it is an api or something, I would highly advise you to create the tables with code, on page load. That will save you a lot of time.
Hope this helps! If not, please comment
Edit
I have made the standardTable now relative. Also instead of .panel5 each panel now has an class of panel and an id of panel-# in order to identify them. I assumed that every jockey in every panel is unique, if that isn't the case I might have to rewrite some bits. Also added a box-shadow and a z-index to the detail tables to make them more visible.
Hope this helps!

Let me revise your requirements,
You will create a table with X rows & Y columns, on hovering any cell you need to show another table right ?
First I would suggest that instead of tables you can go for 'flex' or 'grid' so that DOM will be created in less time than for tables.
Now consider a table with X rows & Y columns, for each cell you can set onmouseover event.
<td onmouseover=showAssociatedTable(cellId)>
function showAssociatedTable(cellId) {
//here you can append associated table or
//you can toggle css for associated table with display: 'none' or 'block'
}

Keep table header visible without showing scrollbars in table body

I am making a page with tabular data is scrollable with main page scrollbar but with keeping table header visible. There's a page header that sticks on top and pagination area that sticks on bottom on the page.
I gave it a try here.
var dataHeader = document.querySelector('.data thead');
var scrollValue = 50;
window.onscroll = function () {
if (document.body.scrollTop > scrollValue || document.documentElement.scrollTop > scrollValue) {
dataHeader.className = "fixed";
} else {
dataHeader.className = "";
}
};
.main {
position: relative;
top: 0;
width: 700px;
margin: 0 auto;
}
.header {
position: fixed;
top: 0;
background-color: #abc;
width: 700px;
z-index: 10;
}
.content {
position: relative;
top: 60px;
background: #cfe;
}
.content-header {
color: blue;
padding-top: 10px;
}
.data {
position: relative;
margin-bottom: 18px;
}
.data table {
border-collapse: collapse;
width: 700px;
}
.data thead {
background: grey;
width: 700px;
display: table-header-group;
}
.data tbody {
width: 700px;
}
.data thead.fixed {
position: fixed;
top: 80px;
}
.data thead.fixed th {
width: 90px;
}
.paging {
position: absolute;
bottom: 0;
background-color: black;
color: white;
width: 700px;
}
.column {
padding: 2;
width: 80px;
}
<div class="main">
<div class="header">
<h1>Super Page</h1>
</div>
<div class="content">
<div class="content-header">
<h2>Beautiful Content</h2>
</div>
<div class="data">
<table>
<colgroup>
<col class="column">
<col class="column">
<col class="column">
</colgroup>
<thead>
<tr>
<th class="column">Sr</th>
<th class="column">City</th>
<th class="column">Country</th>
</tr>
<thead>
<tbody>
<tr>
<td>1</td>
<td>Amsterdam</td>
<td>Netherlands</td>
</tr>
<tr>
<td>2</td>
<td>Lahore</td>
<td>Pakistan</td>
</tr>
<tr>
<td>3</td>
<td>Doha</td>
<td>Qatar</td>
</tr>
<tr>
<td>4</td>
<td>Mumbai</td>
<td>India</td>
</tr>
<tr>
<td>5</td>
<td>Rotterdam</td>
<td>Netherlands</td>
</tr>
<tr>
<td>6</td>
<td>Amsterdam</td>
<td>Netherlands</td>
</tr>
<tr>
<td>7</td>
<td>Lahore</td>
<td>Pakistan</td>
</tr>
<tr>
<td>8</td>
<td>Doha</td>
<td>Qatar</td>
</tr>
<tr>
<td>9</td>
<td>Mumbai</td>
<td>India</td>
</tr>
<tr>
<td>10</td>
<td>Rotterdam</td>
<td>Netherlands</td>
</tr>
<tr>
<td>11</td>
<td>Amsterdam</td>
<td>Netherlands</td>
</tr>
<tr>
<td>12</td>
<td>Lahore</td>
<td>Pakistan</td>
</tr>
<tr>
<td>13</td>
<td>Doha</td>
<td>Qatar</td>
</tr>
<tr>
<td>14</td>
<td>Mumbai</td>
<td>India</td>
</tr>
<tr>
<td>15</td>
<td>Rotterdam</td>
<td>Netherlands</td>
</tr>
<tr>
<td>16</td>
<td>Amsterdam</td>
<td>Netherlands</td>
</tr>
<tr>
<td>17</td>
<td>Lahore</td>
<td>Pakistan</td>
</tr>
<tr>
<td>18</td>
<td>Doha</td>
<td>Qatar</td>
</tr>
<tr>
<td>19</td>
<td>Mumbai</td>
<td>India</td>
</tr>
<tr>
<td>20</td>
<td>Rotterdam</td>
<td>Netherlands</td>
</tr>
<tr>
<td>21</td>
<td>Prague</td>
<td>Czech Republic</td>
</tr>
</tbody>
</table>
</div>
<!-- /.data -->
<div class="paging">
Displaying 10 of 100 records
</div>
</div>
<!-- /.content -->
</div>
<!-- /.main -->
The only problem is when I scroll down, table header kind of collapses and does not remain aligned with table body's columns. How Can I fix it?

You can adjust your .data thead.fixed th rule to width: calc(700px/3); like so:
var dataHeader = document.querySelector('.data thead');
var scrollValue = 50;
window.onscroll = function () {
if (document.body.scrollTop > scrollValue || document.documentElement.scrollTop > scrollValue) {
dataHeader.className = "fixed";
} else {
dataHeader.className = "";
}
};
.main {
position: relative;
top: 0;
width: 700px;
margin: 0 auto;
}
.header {
position: fixed;
top: 0;
background-color: #abc;
width: 700px;
z-index: 10;
}
.content {
position: relative;
top: 60px;
background: #cfe;
}
.content-header {
color: blue;
padding-top: 10px;
}
.data {
position: relative;
margin-bottom: 18px;
}
.data table {
border-collapse: collapse;
width: 700px;
}
.data thead {
background: grey;
width: 700px;
display: table-header-group;
}
.data tbody {
width: 700px;
}
.data thead.fixed {
position: fixed;
top: 80px;
}
.data thead.fixed th {
width: calc(700px/3);
}
.paging {
position: absolute;
bottom: 0;
background-color: black;
color: white;
width: 700px;
}
.column {
padding: 2;
width: 80px;
<div class="main">
<div class="header">
<h1>Super Page</h1>
</div>
<div class="content">
<div class="content-header">
<h2>Beautiful Content</h2>
</div>
<div class="data">
<table>
<colgroup>
<col class="column">
<col class="column">
<col class="column">
</colgroup>
<thead>
<tr>
<th class="column">Sr</th>
<th class="column">City</th>
<th class="column">Country</th>
</tr>
<thead>
<tbody>
<tr>
<td>1</td>
<td>Amsterdam</td>
<td>Netherlands</td>
</tr>
<tr>
<td>2</td>
<td>Lahore</td>
<td>Pakistan</td>
</tr>
<tr>
<td>3</td>
<td>Doha</td>
<td>Qatar</td>
</tr>
<tr>
<td>4</td>
<td>Mumbai</td>
<td>India</td>
</tr>
<tr>
<td>5</td>
<td>Rotterdam</td>
<td>Netherlands</td>
</tr>
<tr>
<td>6</td>
<td>Amsterdam</td>
<td>Netherlands</td>
</tr>
<tr>
<td>7</td>
<td>Lahore</td>
<td>Pakistan</td>
</tr>
<tr>
<td>8</td>
<td>Doha</td>
<td>Qatar</td>
</tr>
<tr>
<td>9</td>
<td>Mumbai</td>
<td>India</td>
</tr>
<tr>
<td>10</td>
<td>Rotterdam</td>
<td>Netherlands</td>
</tr>
<tr>
<td>11</td>
<td>Amsterdam</td>
<td>Netherlands</td>
</tr>
<tr>
<td>12</td>
<td>Lahore</td>
<td>Pakistan</td>
</tr>
<tr>
<td>13</td>
<td>Doha</td>
<td>Qatar</td>
</tr>
<tr>
<td>14</td>
<td>Mumbai</td>
<td>India</td>
</tr>
<tr>
<td>15</td>
<td>Rotterdam</td>
<td>Netherlands</td>
</tr>
<tr>
<td>16</td>
<td>Amsterdam</td>
<td>Netherlands</td>
</tr>
<tr>
<td>17</td>
<td>Lahore</td>
<td>Pakistan</td>
</tr>
<tr>
<td>18</td>
<td>Doha</td>
<td>Qatar</td>
</tr>
<tr>
<td>19</td>
<td>Mumbai</td>
<td>India</td>
</tr>
<tr>
<td>20</td>
<td>Rotterdam</td>
<td>Netherlands</td>
</tr>
<tr>
<td>21</td>
<td>Prague</td>
<td>Czech Republic</td>
</tr>
</tbody>
</table>
</div>
<!-- /.data -->
<div class="paging">
Displaying 10 of 100 records
</div>
</div>
<!-- /.content -->
</div>
<!-- /.main -->

i want table header to be fixed and table body to be scroll-able with filter

i want table header to be fixed and table body to be scroll-able with filter at left(whole page scrollable) keeping alignment of the body and header where width, padding and margin are in percentage. Also responsiveness has to be maintained.
HTML
<div id="tabletop" class="col-sm-10 mail_view" style="margin-top: 28px;">
<div id="loadtable" style="position: relative;">
<table id="datatable" class="table table-striped dataTable no-footer" role="grid" aria-describedby="datatable_info" style="position: relative;">
<thead id="tablerecords" class="ranktablehead">
<tr role="row">
<th class="table-head aligncenter" style="width: 8%; color: #a6a5a5 !important;">SL NO</th>
<th class="sorting_asc aligncenter" id="Name" tabindex="0" aria-label="Name: activate to sort column ascending" aria-controls="datatable" rowspan="1" colspan="1" aria-sort="ascending" style="width: 17%; color:#a6a5a5;">
<span style="cursor:pointer" ng-click="changeSorting('Name')">NAME</span></th>
<th class="sorting aligncenter" id="Location" tabindex="0" aria-label="Location: activate to sort column ascending" aria-controls="datatable" rowspan="1" colspan="1" aria-sort="ascending" style="width: 13%; color:#a6a5a5;">
<span style="cursor:pointer" ng-click="changeSorting('Location')">LOCATION</span></th>
<th class="sorting aligncenter" id="City" tabindex="0" aria-label="City: activate to sort column ascending" aria-controls="datatable" rowspan="1" colspan="1" aria-sort="ascending" style="width: 12%; color:#a6a5a5;">
<span style="cursor:pointer" ng-click="changeSorting('City')">CITY</span></th>
<th class="sorting aligncenter" id="Region" tabindex="0" aria-label="Region: activate to sort column ascending" aria-controls="datatable" rowspan="1" colspan="1" aria-sort="ascending" style="width: 12%; color:#a6a5a5;">
<span style="cursor:pointer" ng-click="changeSorting('Region')">REGION</span></th>
<th class="sorting aligncenter" id="Country" tabindex="0" aria-label="Country: activate to sort column ascending" aria-controls="datatable" rowspan="1" colspan="1" aria-sort="ascending" style="width: 13%; color:#a6a5a5;">
<span style="cursor:pointer" ng-click="changeSorting('Country')">COUNTRY</span></th>
<th class="sorting aligncenter" id="World" tabindex="0" aria-label="World: activate to sort column ascending" aria-controls="datatable" rowspan="1" colspan="1" aria-sort="ascending" style="width: 12%; color:#a6a5a5;">
<span style="cursor:pointer" ng-click="changeSorting('World')">WORLD</span></th>
<th style="width: 12%;"></th>
<th style="width: 1%;"></th>
</tr>
<tr id="bulkrank" ng-show="selectall" class="rankerrecord" style="background-color: #356192;">
<td colspan="3" class="aligncenter" style="vertical-align: middle; font-size: 14px; width: 29%;">{{companySelected}} company(s) selected</td>
<td style="vertical-align: middle; font-size: 14px; width: 12%;" class="aligncenter">
<select class="backgroundColortextBox selectcard" ng-model="mass_rank_city" ng-selected={{mass_rank_city}}>
<option value="None">None</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td style="vertical-align: middle; font-size: 14px; width: 12%;" class="aligncenter">
<select class="backgroundColortextBox selectcard" ng-model="mass_rank_region">
<option value="None" selected="selected">None</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td style="vertical-align: middle; font-size: 14px; width: 13%;" class="aligncenter">
<select class="backgroundColortextBox selectcard" ng-model="mass_rank_country">
<option value="None" selected="selected">None</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td style="vertical-align: middle; font-size: 14px; width: 12%;" rowspan="{{item.locations.length}}" ng-hide="$index>0" class="aligncenter">
<select class="backgroundColortextBox selectcard " ng-model="mass_rank_world">
<option value="None" selected="selected">None</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td style="vertical-align: middle; font-size: 14px; width: 12%;" id="saveRankBorder{{item['Sl No']}}" rowspan="{{item.locations.length}}" ng-hide="$index>0" class="aligncenter">
<a class="rankersavecancel" ng-click="saveMassRanksRequest()" title="Save"><img src="/images/right.png" width="21" height="21"></a>
<a id="undo{{item['Sl No']}}" ng-click="undoMassRanks()" class="rankersavecancel" title='Undo' ng-disabled="false"><img src="/images/cross.png" width="21" height="21">
</a>
</td>
<td style=width:1% "></td>
</tr>
</thead>
<tbody id="tablecontent " ng-repeat="item in items track by $index " style=" ">
<tr class="rankerrecord " ng-repeat="member in item.locations " id="rowrank ">
<td rowspan="{{item.locations.length}} "
ng-hide="$index>0" ng-model="item.slno" class="rank-card-text-center" style="vertical-align: middle; font-size: 14px; width: 8%; color: #eeeeee;">{{item['Sl No']}}</td>
<td rowspan="{{item.locations.length}}" ng-hide="$index>0" ng-model="item.companyname" class="rank-card-text-center alignleft" style="vertical-align: middle; font-size: 14px; width: 17%; "><a data-toggle="modal" data-target="#myModal" ng-click="companyDetails(item._id, item.Name)" style="cursor: pointer; color: #3b88da !important;">{{item.Name}}</a></td>
<td class="" style="vertical-align: middle; font-size: 14px; width: 13%;" ng-model="member.location">{{member.location}}</td>
<td style="vertical-align: middle; width: 13%;" class="aligncenter">
<select class="backgroundColortextBox selectcard" ng-model="member.rank_city" ng-focus="saveinitial(item,member.rank_city,member.rank_region,member.rank_country,item.rank_world)">
<option ng-repeat="opt in item.values">{{opt.val}}</option>
</select>
</td>
<td style="vertical-align: middle; font-size: 14px; width: 12%;" class="aligncenter">
<select class="backgroundColortextBox selectcard" ng-model="member.rank_region" ng-focus="saveinitial(item,member.rank_city,member.rank_region,member.rank_country,item.rank_world)">
<option ng-repeat="opt in item.values">{{opt.val}}</option>
</select>
</td>
<td style="vertical-align: middle; font-size: 14px; width: 13%;" class="aligncenter">
<select class="backgroundColortextBox selectcard" ng-model="member.rank_country" ng-focus="saveinitial(item,member.rank_city,member.rank_region,member.rank_country,item.rank_world)">
<option ng-repeat="opt in item.values">{{opt.val}}</option>
</select>
</td>
<td style="vertical-align: middle; font-size: 14px; width: 13%;" rowspan="{{item.locations.length}}" ng-hide="$index>0" class="aligncenter">
<select class="backgroundColortextBox selectcard" ng-model="item.rank_world" ng-focus="saveinitial(item,member.rank_city,member.rank_region,member.rank_country,item.rank_world)">
<option ng-repeat="opt in item.values">{{opt.val}}</option>
</select>
</td>
<td style="vertical-align: middle; width: 12%;" rowspan="{{item.locations.length}}" ng-hide="$index>0" class="rank-card-text-center">
<a class="rankersavecancel" ng-click="saveranks(item)" title="Save"><img src="/images/right.png" width="21" height="21"></a>
<a id="undo{{item['Sl No']}}" ng-click="undoranks(item)" class="rankersavecancel" title='Undo' ng-disabled="false"><img src="/images/cross.png" width="21" height="21">
</a>
<input type="checkbox" id="{{item._id}}" ng-checked="{{item.isSelected}}" ng-click="removeObjectIdFromMasskRank(item,selectall)" class="rankersavecancel" />
</td>
<td style="width: 1%;" id="saveRankBorder{{item['Sl No']}}"></td>
</tr>
</tbody>
</table>
</div>
<div id="nopagination" style="margin: 0 auto; text-align: center"></div>
<div class="pagination" id="pagination" style="float:right">
<ul class="pagination">
<li ng-class="prevPageDisabled()"><a href ng-click="firstPage()">First</a></li>
<li ng-class="prevPageDisabled()"><a href ng-click="prevPage()">Prev</a></li>
<li ng-repeat="n in range()" ng-class="{active: n == currentPage}" ng-click="setPage(n)"><a href>{{n+1}}</a></li>
<li ng-class="nextPageDisabled()"><a href ng-click="nextPage()">Next</a></li>
<li ng-class="nextPageDisabled()"><a href ng-click="lastPage()">Last</a></li>
</ul>
</div>
</div>
CSS
/* Filter Css */
.filtersList li { list - style: none;
margin - bottom: 15 px; }
.filtersList li.reset { text - align: right }
.filtersIinputSelect { width: 100 % ;padding: 5 px }
.filtersList li select { width: 100 % }
.mail_list_column, .x_panel, .mail_list, .mail_view { border: none;text - align: left; }
.filterHeader { border - bottom: 1 px solid# d5d5d5;
padding - bottom: 8 px;
margin - bottom: 15 px;
margin - top: 7 px;
font - size: 13 px;
color: #a6a5a5; }
.filtersList li: last - child { margin - bottom: 0 px!important; }
.delsecButton { width: 120 px!important;height: 30 px!important;cursor: not - allowed!important;color: rgba(252, 107, 107, 0.4);font - size: 13 px;border: 1 px solid# e11a1a;background: transparent;border - radius: 5 px }
.secButton { width: 120 px!important;height: 30 px!important;font - size: 13 px;border: 1 px solid #3b88da;background:transparent; border-radius:0px}
.urlLinkcolor{color: # 3 b88da;cursor: pointer; }
.addHover: hover { background - color: #3b88da; color:# fff }
.urlLinkcolor: hover { font - decoration: underline; }
.filterLabelFontsize label { font - size: 13 px;
font - weight: normal; }
.filterHeaderLabelFontsize { font - size: 14 px;
font - weight: normal; }
.filterLabelFontsize h5 { border - bottom: 1 px solid# d5d5d5;
padding - bottom: 5 px; }
.rankfilterlist { margin - bottom: 15 px; }
.fiter - title {}
/* Pagination Css */
.pagination { text - align: right; }
.table - bordered > tbody > tr > td, .table - bordered > tbody > tr > th, .table - bordered > tfoot > tr > td, .table - bordered > tfoot > tr > th, .table - bordered > thead > tr > td, .table - bordered > thead > tr > th { border: none; }
.table - striped > tbody > tr: nth - of - type(odd) { background - color: transparent; }
.table > thead > tr > th { border - bottom: none; }
.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th { color: #fff }
.backgroundColortextBox { background - color: #596473; border:none}
.navbar-default{background-color:# fff }
/* Company Info Css */
.companyInfoheader { background: #172436; padding:14px 0; border-bottom:1px solid # 91 c449;margin - bottom: 2 px;height: 45 px!important; }
.companyInfotitle { color: #fff;padding - left: 1 % ; }
.companyInfotitle { color: #fff;padding - left: 1.5 % ; }
.companyInfoMinMaxBox { width: 45 % ;padding: 5 px; }
.companyInfoLabelColor { color: #a6a5a5; }
.filter - bar - right - 5 { float: right;margin - right: 2 % ;margin - top: -.7 % ; }#
RightBox {
box - shadow: 0 px 2 px 8 px rgba(0, 0, 0, 0.8);
border: 1 px solid# fff;
text - align: left;
padding: 10 px 0;
width: 98 % ;
margin - left: 24 px;
margin - top: 10 px;
}#
RightBox label { text - transform: uppercase }#
RightBox table { width: 75 % ;color: #fff;margin - left: 2 % }#
RightBox table tr td: nth - child(odd) { width: 120 px;padding - bottom: 10 px }#
RightBox table tr td: nth - child(even) { width: 240 px;padding - bottom: 10 px }#
RightBox: last - child {
margin - bottom: 15 px;
}
.moredetails {
float: right;
margin - top: -25 px;
font - weight: 500;
color: #428BCA;
background: transparent;
border: none;
outline: none;
margin-right: 6%;
}
.moredetails:hover{text-decoration:underline}
.chkBox {
float: right;
margin-top: -50px !important;
width: 2%;
outline: none;
}
.row{font-family: 'Lato';}
.fa-sort-down:before, .fa-sort-desc:before{content: "\f0dd"; float: right;font-size: 15px; margin-top: -4px; padding-left: 5px;}
/* Calibrator Css */
# candidateCountborder,
#companyCountborder { border: 1 px dashed# fff;margin - top: 33 px;height: 70 vh }#
cleanupCountborder { border: 1 px dashed# fff;height: 70 vh }#
candidatenumber { text - align: center;
vertical - align: middle }
/* Modal Css */
.modal - header { background - color: #fff }
.modal - heading { font - family: 'Lato', sans - serif;
font - size: 18 px;
font - weight: 300;
text - align: left;
color: #172436;}
.modal-url {font-family: 'Lato', sans-serif; font-size: 14px; font-weight: 300; text-align: left; color: # 3 b88da; }
.modal - label { font - family: 'Lato', sans - serif;
font - size: 13 px;
font - weight: normal;
text - align: left;
color: #d5d5d5!important;
text - transform: capitalize; }
.modal - data { font - size: 14 px;
font - weight: normal;
text - align: left;
color: #ffffff; }
.modal - content { background - color: #2f3a4a; margin-top:-7%; border-radius:0px !important}
.adminmodalIinputSelect{width: 80%; padding: 5px;}
.modaltable{color: # fff;
width: 100 % ; }
.modaltable tr td: first - child { width: 25 % ; }
.modaltable tr td: last - child { width: 52 % ;margin - right: 15 % }
.modal - dialog { margin - top: 10 % ; }
.modal - footer { border: none;padding: 10 px 0 15 px 0; }
.modalButtons {
background - color: #596473; color: # FFFFFF;
border - radius: 0 px;
display: inline - block;
margin - bottom: 0;
font - size: 14 px;
font - weight: 400;
line - height: 1.42857143;
text - align: center;
white - space: nowrap;
vertical - align: middle; - ms - touch - action: manipulation;
touch - action: manipulation;
cursor: pointer; - webkit - user - select: none; - moz - user - select: none; - ms - user - select: none;
user - select: none;
background - image: none;
border: 1 px solid transparent;
}#
savemsg { color: #a6a5a5;padding - top: 5 px; }
/* Add User Css */
#
adduser {
display: none;
}
/* datatable common css */
table.dataTable { margin - top: 0!important }
table.dataTable thead.sorting: after,
table.dataTable thead.sorting_asc: after,
table.dataTable thead.sorting_desc: after,
table.dataTable thead.sorting_asc_disabled: after,
table.dataTable thead.sorting_desc_disabled: after {
position: relative!important;
bottom: -2 px!important;
margin - left: 10 px!important;
right: 0!important;
display: inline!important;
font - family: 'Glyphicons Halflings';
opacity: 0.5;
}
table.dataTable thead.sorting,
table.dataTable thead.sorting_asc,
table.dataTable thead.sorting_desc,
table.dataTable thead.sorting_asc_disabled,
table.dataTable thead.sorting_desc_disabled {
cursor: context - menu!important;
}
.selectcard {
background: transparent;
width: 74 px;
height: 24 px;
border: 1 px solid# ffffff;
color: #ffffff;
font - size: 14 px;
}
.selectcard: focus {
background - color: #596473;
}
.modalcontentlabel {
color: # FFFFFF!important;
}
.rankerrecord {
height: 80 px;
text - align: left justify;
border: none!important;
border - bottom: 1 px solid #596473;
}
.filter-input-height {
height: 30px;
}
.table-head {
font-family: 'Lato', sans-serif;
font-size: 13px;
font-weight: normal;
color: # d5d5d5!important;
}
.radio {
display: inline - block;
color: #c6c6c6;
}
.radio: active {
color: #eeeeee!important;
}
.rankersavecancel {
margin: 2 px 5 % ;
}
.radio - button {
font - size: 14 px;
font - weight: normal;
color: #eeeeee;
}
table.dataTable thead.sorting: after,
table.dataTable thead.sorting_asc: after,
table.dataTable thead.sorting_desc: after,
table.dataTable thead.sorting_asc_disabled: after,
table.dataTable thead.sorting_desc_disabled: after {
position: relative!important;
bottom: -2 px!important;
margin - left: 10 px!important;
right: 0!important;
display: inline!important;
font - family: 'Glyphicons Halflings';
opacity: 0.5;
}
table.dataTable thead.sorting,
table.dataTable thead.sorting_asc,
table.dataTable thead.sorting_desc,
table.dataTable thead.sorting_asc_disabled,
table.dataTable thead.sorting_desc_disabled {
cursor: context - menu!important;
}
.ranktablehead { position: fixed;background - color: #263141; border-bottom: 1px solid # FFFFFF;width: 76 % ;top: 104 px; }

This sort of problem has already been solved in an other thread.
Here is the fiddle with the solution made by someone else.
http://jsfiddle.net/andrewwhitaker/fj8wM/
<table id="table-1">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
tbody>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
</tbody>
</table>
<table id="header-fixed"></table>
this person just made a second table for it. It has a bit of jQuery though.

Please find below code for your purpose:
<html>
<head>
<title>Demo</title>
<style>
.aws-main {
display: block;
}
.aws-left-sidebar {
float: left;
max-height: 320px;
width: 20%;
padding: 10px;
background-color: #EEE;
box-sizing: border-box;
overflow-y: scroll;
}
.aws-filter { padding: 10px 0; }
.aws-right-sidebar {
float: left;
width: 80%;
box-sizing: border-box;
}
.aws-fixed-header {
padding: 0;
}
.aws-fixed-header thead {
display: block;
background-color: #333;
color: #FFF;
}
.aws-fixed-header tbody {
display: block;
max-height: 300px;
width: 100%;
overflow-y: scroll;
}
.aws-fixed-header tr td {
width: 200px;
padding: 5px 10px;
}
.aws-fixed-header tbody tr {
background-color: #EEE;
}
.aws-fixed-header tbody tr:nth-child(2n) {
background-color: #FFF;
}
</style>
</head>
<body>
<div class="aws-main">
<div class="aws-left-sidebar">
<div class="aws-filter">Filter</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
<div class="aws-filter">Info</div>
</div>
<div class="aws-right-sidebar">
<table class="aws-fixed-header">
<thead>
<tr>
<td>Sl. No.</td>
<td>Name</td>
<td>Age</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>2</td>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>2</td>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>4</td>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>4</td>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>1</td>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>5</td>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>6</td>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>7</td>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>8</td>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>8</td>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>8</td>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>8</td>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>8</td>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>8</td>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>8</td>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>8</td>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>8</td>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>8</td>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>8</td>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>8</td>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>8</td>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>8</td>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>8</td>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>8</td>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>8</td>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>8</td>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>8</td>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>8</td>
<td>John Doe</td>
<td>24</td>
</tr>
<tr>
<td>8</td>
<td>John Doe</td>
<td>24</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>

HTML table headers to be fixed without scrolling

Please suggest how can i lock the headers in the table not to scroll. Find the sample code : http://jsfiddle.net/7t9qkLc0/14/ .
I want to lock Column1 and Column2 header so that when we scroll down to view the data the table headers are still visible.Thanks in advance.
My html code:
<div id="test" style="float: left; border: 0px solid #99ffff;">
<table cellpadding="2px" cellspacing="2px" style="border: 0px solid #ffffff; margin-right: 15px; margin-bottom: 20px;">
<tr>
<td>
<table cellpadding="2px" cellspacing="2px" style="border: 2px solid #657383; margin-bottom: 15px;" width="300px">
<tr>
<td colspan="3" style="padding-left: 0px; padding-right: 0px; padding-bottom: 0px">
<table width="300px" border="1" class="newTable">
<tr>
<th>Column1</th>
<th>Column2</th>
</tr>
<tr><td class="rowStyle">data 1</td>
<td class="rowStyle">data1 </td></tr>
<tr><td class="rowStyle">data 2</td>
<td class="rowStyle">data2</td></tr>
<tr><td class="rowStyle">data 3</td>
<td class="rowStyle">data3</td></tr>
<tr><td class="rowStyle">data 1</td>
<td class="rowStyle">data1 </td></tr>
<tr><td class="rowStyle">data 2</td>
<td class="rowStyle">data2</td></tr>
<tr><td class="rowStyle">data 1</td>
<td class="rowStyle">data1 </td></tr>
<tr><td class="rowStyle">data 2</td>
<td class="rowStyle">data2</td></tr>
<tr><td class="rowStyle">data 3</td>
<td class="rowStyle">data3</td></tr>
<tr><td class="rowStyle">data 3</td>
<td class="rowStyle">data3</td></tr>
</table></td></tr>
</table>
</td>
</tr>
</table>
</div>

You have to put your header in a seperate table and put a fixed position on it. Take a look at this.
http://jsfiddle.net/7t9qkLc0/47/
<table width="290px" border="1" class="newTable">
<tr>
<th>Column1</th>
<th>Column2</th>
</tr>
</table>
<table style="margin-top:25px">
<tr> ....

Try it like this:
Changed this in the HTML:
<th>Column1
<div>Column111</div>
</th>
<th>Column2
<div>Column222</div>
</th>
(The divs are new)
And add this CSS:
th {
height: 0;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
color: transparent;
border: none;
white-space: nowrap;
}
th div{
position: absolute;
background: blue;
color: #fff;
padding: 9px 25px;
top: 0;
line-height: normal;
border-left: 1px solid #800;
}
NOTE: The css is a little bit rough, but with a little bit styling it will look better
FIDDLE
Another way is to separate the headerline from the table and make them 2 elements.

you could assign the position:fixed; attribute to the th style and then style it to fit in with the table so positioning and overlapping is correct.
th {
position: fixed;
}
I also just found this link that answers your question http://jsfiddle.net/T9Bhm/7/

Why does google console report unexpected pixel size for <td>

I am following the code to Head First's Javascript book and I noticed something unsettling in my google console. If I drill down in the console in the elements section, when I highlight a tag the browser tells me it is 96 and not 94 pixels! Its maddening and I cannot figure out why :(
BTW, the resources and code can be downloaded at: code download
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Battleship</title>
<style>
body
{
background-color: black;
}
div#board
{
position: relative;
width: 1024px;
height: 863px;
margin: auto;
background: url("board.jpg") no-repeat;
}
div#messageArea
{
position: absolute;
top: 0px;
left: 0px;
color: rgb(83, 175, 19);
}
table
{
position: absolute;
left: 173px;
top: 98px;
border-spacing: 0px;
}
td
{
width: 94px;
height: 94px;
}
form
{
position: absolute;
bottom: 0px;
right: 0px;
padding: 15px;
background-color: rgb(83, 175, 19);
}
form input
{
background-color: rgb(152, 207, 113);
border-color: rgb(83, 175, 19);
font-size: 1em;
}
.hit
{
background: url("ship.png") no-repeat center center;
}
.miss
{
background: url("miss.png") no-repeat center center;
}
</style>
</head>
<body>
<div id="board">
<div id="messageArea"></div>
<table>
<tr>
<td id="00"></td> <td id="01"></td> <td id="02"></td> <td id="03"></td>
<td id="04"></td> <td id="05"></td> <td id="06"></td>
</tr>
<tr>
<td id="10"></td> <td id="11"></td> <td id="12"></td> <td id="13"></td>
<td id="14"></td> <td id="15"></td> <td id="16"></td>
</tr>
<tr>
<td id="20"></td> <td id="21"></td> <td id="22"></td> <td id="23"></td>
<td id="24"></td> <td id="25"></td> <td id="26"></td>
</tr>
<tr>
<td id="30"></td> <td id="31"></td> <td id="32"></td> <td id="33"></td>
<td id="34"></td> <td id="35"></td> <td id="36"></td>
</tr>
<tr>
<td id="40"></td> <td id="41"></td> <td id="42"></td> <td id="43"></td>
<td id="44"></td> <td id="45"></td> <td id="46"></td>
</tr>
<tr>
<td id="50"></td> <td id="51"></td> <td id="52"></td> <td id="53"></td>
<td id="54"></td> <td id="55"></td> <td id="56"></td>
</tr>
<tr>
<td id="60"></td> <td id="61"></td> <td id="62"></td> <td id="63"></td>
<td id="64"></td> <td id="65"></td> <td id="66"></td>
</tr>
</table>
<form>
<input type="text" id="guessInput" placeholder="A0">
<input type="button" id="fireButton" value="Fire!">
</form>
</div>
<script src="battleship.js"></script>
</body>
</head>

Change this:
td {
width : 94px;
height : 94px;
}
to this:
td {
width : 94px;
height : 94px;
padding : 0;
}
Demo : http://jsfiddle.net/seancannon/daLbQ/