JSFiddle - React, Tailwind, and code Playground
HTML
<table>
<tr>
<th class="col">First Name</th>
<th class="col">Middle Name</th>
<th class="col">Last Name</th>
</tr>
<tr>
<td>Peter</td>
<td>Jeffery</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Marie</td>
<td>Griffin</td>
</tr>
<tr>
<td>Margie</td>
<td>Ann</td>
<td>Thatcher</td>
</tr>
</table>
CSS
table {
width: 100%;
border-collapse: collapse;
overflow: hidden;
z-index: 1;
}
td, th, .row, .col, .ff-fix {
cursor: pointer;
padding: 10px;
position: relative;
}
th,
td{
border: 1px solid #CCC;
width: 33.33%;
}
td:hover::before,
.row:hover::before,
.ff-fix:hover::before {
background-color: #ffa;
content: '\00a0';
height: 100%;
left: -5000px;
position: absolute;
top: 0;
width: 10000px;
z-index: -1;
}
td:hover::after,
.col:hover::after,
.ff-fix:hover::after {
background-color: #ffa;
content: '\00a0';
height: 10000px;
left: 0;
position: absolute;
top: -5000px;
width: 100%;
z-index: -1;
}
JavaScript
function firefoxFix() {
if ( /firefox/.test( window.navigator.userAgent.toLowerCase() ) ) {
var tds = document.getElementsByTagName( 'td' ),
ths = document.getElementsByTagName( 'th' );
for( var index = 0; index < tds.length; index++ ) {
tds[index].innerHTML = '<div class="ff-fix">' + tds[index].innerHTML + '</div>';
};
for( var index = 0; index < ths.length; index++ ) {
ths[index].innerHTML =
'<div class="' + ths[index].className + '">'
+ ths[index].innerHTML
+ '</div>';
ths[index].className = '';
};
var style = '<style>'
+ 'td, th { padding: 0 !important; }'
+ 'td:hover::before, td:hover::after { background-color: transparent !important; }'
+ '</style>';
document.head.insertAdjacentHTML( 'beforeEnd', style );
};
};
firefoxFix();