I am trying to print start and end under execution, but I get an extra cell beside End. I use:
<table style="float: center;border:2px;font-size:20px;color:white;border-collapse: collapse;border-spacing: 3;width: 25%;"> <tr><td> PC </td> <td> INSTRUCTION </td> <td> ISSUED </td> <td colspan="2"><table style="font-size:20px;color:white;border-collapse: collapse;border-spacing: 3;width: 25%;"><tr><td>EXECUTION</td></tr></table><table style="font-size:20px;color:white;border-collapse: collapse;width: 25%;"><tr><td>START</td><td>END</td></tr></table> <td> WRITTEN </td></tr>
How can I remove this extra cell?
Your "extra cell" is the space between the end of the cell with contents "END" and the parent cell containing your embedded tables. For your purpose, instead of embedding one table inside another you should use rowspan and colspan.
body {
background-color: black;
}
table,
tr,
td {
border-color: white;
border-style: solid;
border-width: 2px;
}
table {
border-collapse: collapse;
border-spacing: 3;
color: white;
float: center;
font-size: 20px;
text-transform: uppercase;
width: 25%;
}
<table>
<tr>
<td rowspan="2">PC</td>
<td rowspan="2">Instructions</td>
<td rowspan="2">Isused</td>
<td colspan="2">Execution</td>
<td rowspan="2">Written</td>
</tr>
<tr>
<td>Start</td>
<td>End</td>
</tr>
</table>
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'
}
I'm making a gantt chart-esqe application using a table as a grid for each of the days. When one of the days is allocated the td will be assigned a class which changes its colour to what resource is being used. I'm trying to put a label on top which shows which resource is allocated like the example below.
table {
table-layout: fixed;
border-collapse: collapse;
width: 100px;
}
td {
height: 20px;
width: 20px;
border: black solid 1px;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
<table>
<tbody>
<tr>
<td class="green">sdfsdfsfsdfs</td>
<td class="green"></td>
<td class="green"></td>
<td class="green"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td class="green">te</td>
<td class="green"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td class="red">longstring</td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td class="red">longstring</td>
<td class="red"></td>
<td class="red"></td>
</tr>
</tbody>
</table>
The first two rows which are green work nicely. The label overflowing showing the whole name. I have added a 4th row which does display properly. However the problem comes with the third line. The name is longer than all the days it is allocated so it overflows into the empty tds.
So the only line which doesn't display properly is the 3rd one. The overflow should be hidden so it only display "lon".
Is there any CSS trick which can stop overflowing into an area with a different background/class? Or maybe a javascript solution to prevent overflowing on the last td?
You can use z-index on white cell and assign position static on colored cell to get what you want.
Live demo :
table {
table-layout: fixed;
border-collapse: collapse;
width: 100px;
}
td {
height: 20px;
width: 20px;
border: black solid 1px;
}
td {
z-index: 9;
background-color: white;
position: relative;
}
.green {
position: static;
background-color: green;
}
.red {
position: static;
background-color: red;
}
<table>
<tbody>
<tr>
<td class="green">sdfsdfsfsdfs</td>
<td class="green"></td>
<td class="green"></td>
<td class="green"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td class="green">te</td>
<td class="green"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td class="red">longstring</td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td class="red">longstring</td>
<td class="red"></td>
<td class="red"></td>
</tr>
</tbody>
</table>
Note : There is some trouble with border style
<!DOCTYPE html>
<html>
<body>
<table border="1" style="width:100%">
<tr>
<th>A</th>
<th>B</th>
</tr>
<tr>
<td>10</td>
<td>10</td>
</tr>
</table>
</body>
</html>
The above html data provides a table which has corresponding rows and columns. I want a format in which lines between rows should be hidden only column lines and table border lines should be visible . Hope my question is clear now . I want to create a table where lines between rows should be hidden
You can use the following css:
JSFIDDLE https://jsfiddle.net/seadonk/uf37xzqh/3/
HTML
<table id="thetable">
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td>2</td><td>2</td><td>2</td></tr>
</table>
CSS
#thetable {
border: 2px solid gray;
background: lightgray;
border-spacing: 0px;
border-collapse: collapse;
}
#thetable td{
border-right: 2px solid gray;
padding: 20px;
}
You need to set the css properties border and border-collapse on your table tag and set the right border for your td.
table {
border: 1px solid black;
border-collapse: collapse;
width: 100%;
}
td {
border-right: 1px solid black;
text-align: center;
padding: 5px;
}
<table>
<tr>
<td> a </td>
<td> b </td>
</tr>
<tr>
<td> c </td>
<td> d </td>
</tr>
</table>
<table frame="box" rules="cols">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
try this
JsFieddle
HTML
<table style='border:solid' cellpadding="10" cellspacing="0">
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
</table>
css
td{border-right:solid}
Please refer to this JSFiddle
I am using tablesorter to sort a table. I am also using fadeToggle on the first column of the table to show/hide hidden rows associated with each row.
I want the header of the table to have a border around each cell. The rest of the table should have border-collapse: collapse. It is great on page load and while sorting but as soon as you click to toggle a hidden row, the border shows up on all cells and remains until you resort the table.
I can't seem to find out where the style is getting inherited from after the toggle...
My HTML is:
<table cellspacing=4 cellpadding=2>
<tr>
<td valign='top'>
<div>
<table id="spidtable" class='tablesorter' cellspacing=1 cellpadding=5>
<thead>
<th align=left style="width:100px">SPID</th>
<th align=left style="width:200px">Name</th>
<th align=center style="width:60px">State</th>
<th align=center style="display:none;"> </th>
<th align=center style="width:100px">Duration</th>
<th align=center style="width:100px">Transitions</th>
<th align=center style="width:100px" title="UDM=Number of Degraded Minutes">UDM</th>
<th align=center style="width:100px" title="UIM=Number of Interrupted Minutes">UIM</th>
</thead>
<tbody>
<tr class="parent-row">
<td class="tdd" align=right>11111</td>
<td align=left>Chief Technologies</td>
<td align=center><img border=0 src=/img/green.gif></td>
<td style="display:none;">1</td>
<td align=left></td>
<td align=right>0</td>
<td align=right>0</td>
<td align=right>0</td>
</tr>
<tr class="parent-row-details expand-child" style="display:none"> <td colspan="7"> <table class="tablesorter-child" border=1> <thead><th>Date</th><th>Time</th></thead> <tbody> <tr><td>12/1 /13</td><td>4:00AM</td></tr> <tr><td>12/1/14</td><td>7:00AM</td></tr> <tr><td>12/1/15</td> <td>6:00AM</td></tr> </tbody> </table> </td> </tr>
<tr class="parent-row">
<td class="tdd" align=right>33333</td>
<td align=left>BBBBBBBBBBB</td>
<td align=center><img border=0 src=/img/green.gif></td>
<td style="display:none;">1</td>
<td align=left></td>
<td align=right>0</td>
<td align=right>0</td>
<td align=right>0</td>
</tr>
<tr class="parent-row-details expand-child" style="display:none"> <td colspan="7"> <table class="tablesorter-child" border=1> <thead><th>Date</th><th>Time</th></thead> <tbody> <tr><td>12/1/13</td><td>4:00AM</td></tr> <tr><td>12/1/14</td><td>7:00AM</td></tr> <tr><td>12/1/15</td> <td>6:00AM</td></tr> </tbody> </table> </td> </tr>
<tr class="parent-row">
<td class="tdd" align=right>77777</td>
<td align=left>ZZZZZZZZZZZ</td>
<td align=center><img border=0 src=/img/green.gif></td>
<td style="display:none;">1</td>
<td align=left></td>
<td align=right>0</td>
<td align=right>0</td>
<td align=right>0</td>
</tr>
<tr class="parent-row-details expand-child" style="display:none"> <td colspan="7"> <table class="tablesorter-child" border=1> <thead><th>Date</th><th>Time</th></thead> <tbody> <tr><td>12/1/13</td><td>4:00AM</td></tr> <tr><td>12/1/14</td><td>7:00AM</td></tr> <tr><td>12/1/15</td><td>6:00AM</td></tr> </tbody> </table> </td> </tr>
<tr class="parent-row">
<td class="tdd" align=right>44444</td>
<td align=left>GGGGGGGGGGG</td>
<td align=center><img border=0 src=/img/green.gif></td>
<td style="display:none;">1</td>
<td align=left></td>
<td align=right>0</td>
<td align=right>0</td>
<td align=right>0</td>
</tr>
<tr class="parent-row-details expand-child" style="display:none"> <td colspan="7"> <table class="tablesorter-child" border=1> <thead><th>Date</th><th>Time</th></thead> <tbody> <tr><td>12/1/13</td><td>4:00AM</td></tr> <tr><td>12/1/14</td><td>7:00AM</td></tr> <tr><td>12/1/15</td><td>6:00AM</td></tr> </tbody> </table> </td> </tr>
</tbody></table></div></td><td valign='top'><div id='divSpid'></div></td></tr></table>
And my CSS is:
/* tables */
table.tablesorter {
font-family:arial;
background-color: #CDCDCD;
margin:10px 0pt 15px;
font-size: 12pt;
width: 100%;
text-align: left;
border-collapse: collapse;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
background-color: #e6EEEE;
border: 1px solid #FFF;
font-size: 8pt;
padding: 4px;
}
table.tablesorter thead tr .header {
background: url(http://tablesorter.com/themes/blue/bg.gif) no-repeat 99%;
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
}
table.tablesorter tbody td {
color: white;
padding: 4px;
background-color: #FFF;
vertical-align: top;
}
table.tablesorter thead tr .headerSortUp {
background: url(http://tablesorter.com/themes/blue/desc.gif) no-repeat 99%;
}
table.tablesorter thead tr .headerSortDown {
background: url(http://tablesorter.com/themes/blue/asc.gif) no-repeat 99%;
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
background-color: #8dbdd8;
}
table.tablesorter tr.parent-row > td {
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(bottom, #253355 0%, #587993 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(bottom, #253355 0%, #587993 100%);
/* Opera */
background-image: -o-linear-gradient(bottom, #253355 0%, #587993 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #253355), color-stop(1, #587993));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(bottom, #253355 0%, #587993 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to top, #253355 0%, #587993 100%);
}
table.tablesorter tr.parent-row-details > td {
background: grey;
}
table.tablesorter-child thead tr th, table.tablesorter tfoot tr th {
background-color: #e6E66E;
border: 1px solid #FFF;
font-size: 18pt;
padding: 4px;
}
table.tablesorter-child tbody tr td {
color: black;
}
For me the problem was with using css border-collapse setting. To fix the problem I had to set the table's cellspacing equal to 0.