We Keep Coding

How to expand table rows with jquery?

Currently I have the table that is presented as the image shows with the hidden even rows. What I am looking for is that all the rows are hidden and the name of the month appears.
In the example of the image it would only have to appear November and when displaying it would have that the information for that month will appear. I am using jexpand plugin from jquery
I leave the code so that you can see how I currently have it. Any ideas?
SCRIPT
$(document).ready(function(){
$("#report tr:odd").addClass("odd");
$("#report tr:not(.odd)").hide();
$("#report tr:first-child").show();
$("#report tr.odd").click(function(){
$(this).next("tr").toggle();
$(this).find(".arrow").toggleClass("up");
});
});
CSS
body { font-family:Arial, Helvetica, Sans-Serif; font-size:0.8em;}
#report { border-collapse:collapse;}
#report h4 { margin:0px; padding:0px;}
#report img { float:right;}
#report ul { margin:10px 0 10px 40px; padding:0px;}
#report th { background:#7CB8E2 url(../img/header_bkg.png) repeat-x scroll center left; color:#fff; padding:7px 15px; text-align:center;}
#report td { background:#C7DDEE none repeat-x scroll center left; color:#000; padding:7px 15px; }
#report tr.odd td { background:#fff url(../img/row_bkg.png) repeat-x scroll center left; cursor:pointer; }
#report div.arrow { background:transparent url(../img/arrows.png) no-repeat scroll 0px -16px; width:16px; height:16px; display:block;}
#report div.up { background-position:0px 0px;}
HTML
<table id="report" class="table table-striped table-bordered table-sm text-center" style="width:35%; margin:auto;">
<thead class= "text-center table-info">
<tr>
<th>Date</th>
<th>Calls</th>
<th>Sales</th>
</tr>
</thead>
<tbody>
<?php for($i = 0; $i < count($calls); ++$i) { ?>
<tr class="text-center">
<td id="id"><?= $calls[$i]['date'] ;?></td>
<td id="database"><?= $calls[$i]['calls'] ;?></td>
<td id="total"><?= $calls[$i]['sales'] ;?></td>
<td><div class="arrow"></div></td>
</tr>
<?php } ?>
<?php endif; ?>
</tbody>
</table>

As your dates are display in dd-mm-yyyy so easy way to get month is to use split method then once we get month we need to loop through trs to hide all month expect the first one and also add odd class to it.
Then, onclick of tr just get the month from td and then loop through trs with same month add up class to that td and show same tr.
Demo code:
//when tr is clicked
$(document).on("click", "#report tr.odd", function() {
//get month
var mnth = $(this).find("td:eq(0)").text().trim().split("-")[1]
//loop thorough tr to find same month tr
$("tbody > tr").not(this).each(function() {
var mnth_other = $(this).find("td:eq(0)").text().trim().split("-")[1]
if (mnth == mnth_other) {
$(this).toggle();
$(this).find(".arrow").toggleClass("up");
}
});
});
var date_current;
//loop through tr
$("tbody > tr").each(function() {
//get month
var dates = $(this).find("td:eq(0)").text().trim().split("-")[1];
//check if not equal
if (date_current != dates) {
$(this).addClass("odd");
$(this).find(".arrow").addClass("down");
date_current = dates;
} else {
//hide other tr
$(this).hide()
}
})
.up {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.arrow {
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="report" class="table table-striped table-bordered table-sm text-center" style="width:35%; margin:auto;">
<thead class="text-center table-info">
<tr>
<th>Date</th>
<th>Calls</th>
<th>Sales</th>
</tr>
</thead>
<tbody>
<tr class="text-center">
<td id="id">
27-11-2020
</td>
<td id="database">
22
</td>
<td id="total">
1
</td>
<td>
<div class="arrow"></div>
</td>
</tr>
<tr class="text-center">
<td id="id">
27-11-2020
</td>
<td id="database">
22
</td>
<td id="total">
1
</td>
<td>
<div class="arrow"></div>
</td>
</tr>
<tr class="text-center">
<td id="id">
21-11-2020
</td>
<td id="database">
22
</td>
<td id="total">
12
</td>
<td>
<div class="arrow"></div>
</td>
</tr>
<tr class="text-center">
<td id="id">
20-12-2020
</td>
<td id="database">
222
</td>
<td id="total">
21
</td>
<td>
<div class="arrow"></div>
</td>
</tr>
<tr class="text-center">
<td id="id">
27-12-2020
</td>
<td id="database">
22
</td>
<td id="total">
1
</td>
<td>
<div class="arrow"></div>
</td>
</tr>
<tr class="text-center">
<td id="id">
27-12-2020
</td>
<td id="database">
22
</td>
<td id="total">
1
</td>
<td>
<div class="arrow"></div>
</td>
</tr>
</tbody>
</table>

jQuery TD resize event?

What do I do if I want to know when a <td>'s size changes?
table code:
<style>
#BA1{
border:1px solid #C0C0C0;
border-collapse:collapse;
padding:5px;
}
#BA1 th {
border:1px solid #C0C0C0;
padding:5px;
background:#F0F0F0;
}
#BA1 td {
border:1px solid #C0C0C0;
padding:5px;
}
</style>
<table id="BA1"> <caption> </caption> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> <th>Header 4</th> </tr> </thead> <tbody> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> dfdfdfdfdfdf</td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </tbody> </table>
How can i listen this event?
I have tried these methods:
var x = 0;
$("td").resize(function(){
var txt = x += 1;
});
//planB
$("td").addEventListener("resize", myFunction);
var x = 0;
function myFunction() {
var txt = x += 1;
}
But this code is not working
How can i fix this?

Getting Table Wrapped In <tbody> Automatic

Is there any good and minimal plugin which fix <thead> or first row? And dont add <tbody> automatically.
When i am using <thead> to wrap the first row (directly in HTML Table) , then everything is working right as it should for my table. But when i am adding <thead> to wrap the first row (not HTML but through jquery) $("tr").first().wrap("<thead></thead>"); then it is working but not displaying as it should, because first its wrapping the whole table in <tbody> automatically then adding <thead> in first row.
Please tell me how to solve this because my tables don't have <thead> in HTML. But I need it to fix the first row when scrolling, because it is requirement in all jQuery Plugins to have <thead> to fix first row, please help
Working: http://jsfiddle.net/seky66cb/ (adding <thead> with HTML)
Not Working For Me: http://jsfiddle.net/seky66cb/1/ (adding <thead> with jQuery)
CODE (Not Working As Expected):
Library: jQuery: 2.1.3
HTML:
<table class="gridView" id="table2">
<tr>
<th> Culture Name </th>
<th> Display Name </th>
<th> Culture Code </th>
<th> ISO 639x </th>
</tr>
<tr class="grid">
<td> af-ZA </td>
<td> Afrikaans - South Africa </td>
<td> 0x0436 </td>
<td> AFK </td>
</tr>
<tr class="gridAlternada">
<td> sq-AL </td>
<td> Albanian - Albania </td>
<td> 0x041C </td>
<td> SQI </td>
</tr>
<tr class="grid">
<td> ar-DZ </td>
<td> Arabic - Algeria </td>
<td> 0x1401 </td>
<td> ARG </td>
</tr>
<tr class="gridAlternada">
<td> ar-BH </td>
<td> Arabic - Bahrain </td>
<td> 0x3C01 </td>
<td> ARH </td>
</tr>
<tr class="grid">
<td> ar-EG </td>
<td> Arabic - Egypt </td>
<td> 0x0C01 </td>
<td> ARE </td>
</tr>
<tr class="gridAlternada">
<td> ar-IQ </td>
<td> Arabic - Iraq </td>
<td> 0x0801 </td>
<td> ARI </td>
</tr>
<tr class="grid">
<td> ar-JO </td>
<td> Arabic - Jordan </td>
<td> 0x2C01 </td>
<td> ARJ </td>
</tr>
<tr class="gridAlternada">
<td> ar-KW </td>
<td> Arabic - Kuwait </td>
<td> 0x3401 </td>
<td> ARK </td>
</tr>
<tr class="grid">
<td> ar-LB </td>
<td> Arabic - Lebanon </td>
<td> 0x3001 </td>
<td> ARB </td>
</tr>
<tr class="gridAlternada">
<td> ar-LY </td>
<td> Arabic - Libya </td>
<td> 0x1001 </td>
<td> ARL </td>
</tr>
<tr class="grid">
<td> ar-MA </td>
<td> Arabic - Morocco </td>
<td> 0x1801 </td>
<td> ARM </td>
</tr>
<tr class="gridAlternada">
<td> ar-OM </td>
<td> Arabic - Oman </td>
<td> 0x2001 </td>
<td> ARO </td>
</tr>
<tr class="grid">
<td> ar-QA </td>
<td> Arabic - Qatar </td>
<td> 0x4001 </td>
<td> ARQ </td>
</tr>
<tr class="gridAlternada">
<td> ar-SA </td>
<td> Arabic - Saudi Arabia </td>
<td> 0x0401 </td>
<td> ARA </td>
</tr>
<tr class="grid">
<td> ar-SY </td>
<td> Arabic - Syria </td>
<td> 0x2801 </td>
<td> ARS </td>
</tr>
<tr class="gridAlternada">
<td> ar-TN </td>
<td> Arabic - Tunisia </td>
<td> 0x1C01 </td>
<td> ART </td>
</tr>
<tr class="grid">
<td> ar-AE </td>
<td> Arabic - United Arab Emirates </td>
<td> 0x3801 </td>
<td> ARU </td>
</tr>
<tr class="gridAlternada">
<td> ar-YE </td>
<td> Arabic - Yemen </td>
<td> 0x2401 </td>
<td> ARY </td>
</tr>
<tr class="grid">
<td> hy-AM </td>
<td> Armenian - Armenia </td>
<td> 0x042B </td>
<td> </td>
</tr>
<tr class="gridAlternada">
<td> Cy-az-AZ </td>
<td> Azeri (Cyrillic) - Azerbaijan </td>
<td> 0x082C </td>
<td> </td>
</tr>
<tr class="grid">
<td> Lt-az-AZ </td>
<td> Azeri (Latin) - Azerbaijan </td>
<td> 0x042C </td>
<td> </td>
</tr>
<tr class="gridAlternada">
<td> eu-ES </td>
<td> Basque - Basque </td>
<td> 0x042D </td>
<td> EUQ </td>
</tr>
<tr class="grid">
<td> be-BY </td>
<td> Belarusian - Belarus </td>
<td> 0x0423 </td>
<td> BEL </td>
</tr>
<tr class="gridAlternada">
<td> bg-BG </td>
<td> Bulgarian - Bulgaria </td>
<td> 0x0402 </td>
<td> BGR </td>
</tr>
<tr class="grid">
<td> ca-ES </td>
<td> Catalan - Catalan </td>
<td> 0x0403 </td>
<td> CAT </td>
</tr>
<tr class="gridAlternada">
<td> zh-CN </td>
<td> Chinese - China </td>
<td> 0x0804 </td>
<td> CHS </td>
</tr>
<tr class="grid">
<td> zh-HK </td>
<td> Chinese - Hong Kong SAR </td>
<td> 0x0C04 </td>
<td> ZHH </td>
</tr>
<tr class="gridAlternada">
<td> zh-MO </td>
<td> Chinese - Macau SAR </td>
<td> 0x1404 </td>
<td> </td>
</tr>
<tr class="grid">
<td> zh-SG </td>
<td> Chinese - Singapore </td>
<td> 0x1004 </td>
<td> ZHI </td>
</tr>
<tr class="gridAlternada">
<td> zh-TW </td>
<td> Chinese - Taiwan </td>
<td> 0x0404 </td>
<td> CHT </td>
</tr>
<tr class="grid">
<td> zh-CHS </td>
<td> Chinese (Simplified) </td>
<td> 0x0004 </td>
<td> </td>
</tr>
<tr class="gridAlternada">
<td> zh-CHT </td>
<td> Chinese (Traditional) </td>
<td> 0x7C04 </td>
<td> </td>
</tr>
<tr class="grid">
<td> hr-HR </td>
<td> Croatian - Croatia </td>
<td> 0x041A </td>
<td> HRV </td>
</tr>
<tr class="gridAlternada">
<td> cs-CZ </td>
<td> Czech - Czech Republic </td>
<td> 0x0405 </td>
<td> CSY </td>
</tr>
<tr class="grid">
<td> da-DK </td>
<td> Danish - Denmark </td>
<td> 0x0406 </td>
<td> DAN </td>
</tr>
<tr class="gridAlternada">
<td> div-MV </td>
<td> Dhivehi - Maldives </td>
<td> 0x0465 </td>
<td> </td>
</tr>
<tr class="grid">
<td> nl-BE </td>
<td> Dutch - Belgium </td>
<td> 0x0813 </td>
<td> NLB </td>
</tr>
</table>
jQuery:
$( "tr" ).first().wrap( "<thead></thead>" );
(function ($) {
$.fn.freezeHeader = function (params) {
var copiedHeader = false;
var idObj = this.selector.replace('#', '');
var container;
var grid;
var conteudoHeader;
var openDivScroll = '';
var closeDivScroll = '';
if (params && params.height !== undefined) {
divScroll = '<div id="hdScroll' + idObj + '" style="height: ' + params.height + '; overflow-y: scroll">';
closeDivScroll = '</div>';
}
grid = $('table[id$="' + idObj + '"]');
conteudoHeader = grid.find('thead');
if (params && params.height !== undefined) {
if ($('#hdScroll' + idObj).length == 0) {
grid.wrapAll(divScroll);
}
}
var obj = params && params.height !== undefined
? $('#hdScroll' + idObj)
: $(window);
if ($('#hd' + idObj).length == 0) {
grid.before('<div id="hd' + idObj + '"></div>');
}
obj.scroll(function () { freezeHeader(); })
function freezeHeader() {
if ($('table[id$="' + idObj + '"]').length > 0) {
container = $('#hd' + idObj);
if (conteudoHeader.offset() != null) {
if (limiteAlcancado(params)) {
if (!copiedHeader) {
cloneHeaderRow(grid);
copiedHeader = true;
}
}
else {
if (($(document).scrollTop() > conteudoHeader.offset().top)) {
container.css("position", "absolute");
container.css("top", (grid.find("tr:last").offset().top - conteudoHeader.height()) + "px");
}
else {
container.css("visibility", "hidden");
container.css("top", "0px");
container.width(0);
}
copiedHeader = false;
}
}
}
}
function limiteAlcancado(params) {
if (params && params.height !== undefined) {
return (conteudoHeader.offset().top <= obj.offset().top);
}
else {
return ($(document).scrollTop() > conteudoHeader.offset().top && $(document).scrollTop() < (grid.height() - conteudoHeader.height() - grid.find("tr:last").height()) + conteudoHeader.offset().top);
}
}
function cloneHeaderRow() {
container.html('');
container.val('');
var tabela = $('<table style="margin: 0 0;"></table>');
var atributos = grid.prop("attributes");
$.each(atributos, function () {
if (this.name != "id") {
tabela.attr(this.name, this.value);
}
});
tabela.append('<thead>' + conteudoHeader.html() + '</thead>');
container.append(tabela);
container.width(conteudoHeader.width());
container.height(conteudoHeader.height);
container.find('th').each(function (index) {
var cellWidth = grid.find('th').eq(index).width();
$(this).css('width', cellWidth);
});
container.css("visibility", "visible");
if (params && params.height !== undefined) {
container.css("top", obj.offset().top + "px");
container.css("position", "absolute");
} else {
container.css("top", "0px");
container.css("position", "fixed");
}
}
};
})(jQuery);
$(document).ready(function () {
$("#table1").freezeHeader({ 'height': '300px' });
$("#table2").freezeHeader();
$("#tbex1").freezeHeader();
$("#tbex2").freezeHeader();
$("#tbex3").freezeHeader();
$("#tbex4").freezeHeader();
})
CSS:
#jquery-script-menu {
position: fixed;
height: 90px;
width: 100%;
top: 0;
left: 0;
border-top: 5px solid #316594;
background: #fff;
-moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
-webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
z-index: 999999;
padding: 10px 0;
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
}
.jquery-script-center {
width: 960px;
margin: 0 auto;
}
.jquery-script-center ul {
width: 212px;
float:left;
line-height:45px;
margin:0;
padding:0;
list-style:none;
}
.jquery-script-center a {
text-decoration:none;
}
.jquery-script-ads {
width: 728px;
height:90px;
float:right;
}
.jquery-script-clear {
clear:both;
height:0;
}
*{
margin:0;
padding:0;
}
body{
font-family:"Trebuchet MS", "Myriad Pro", Arial, sans-serif;
font-size:14px;
background:#fefefe;
color:#333;
text-shadow:1px 1px 1px #fff;
overflow-x:hidden;
}
h1{
font-size:30px;
color:#666;
}
h2{
font-size:20px;
padding:10px 0px 10px 0px;
margin:15px 0px 20px 0px;
}
a{
color:#555;
text-decoration:none;
}
a:hover{
color:#222;
}
p{
padding:5px 0px;
}
.wrapper{
width:960px;
margin:20px auto;
}
.clear{
clear:both;
}
/* ----------->>> GridView <<<----------*/
.gridView
{
width: 100%;
clear: both;
margin: 10px 0;
border: medium none !important;
border-collapse: collapse;
}
.gridView tr td
{
border: 1px solid #aaa;
vertical-align: top;
}
.gridView thead tr, .footer
{
font: bold 11px Arial;
vertical-align: middle;
text-decoration: none;
text-align: center;
}
/* --->>> HeaderStyle (cabeçalho) <<<---*/
.gridView thead tr
{
color: #333;
background: #fff url(../images/bg-header-grid.png) bottom repeat-x;
vertical-align: middle;
height: 25px;
}
.gridView thead tr th
{
border: 1px solid #E2E6E6;
border-bottom: 3px solid #E5E5E5;
vertical-align: middle;
}
.gridView thead tr a
{
font: bold 11px Arial, Verdana;
color: #333;
padding: 0 0 0 10px;
text-decoration: underline;
background: url(../images/Icones/ico-ordem.gif) left no-repeat;
vertical-align: middle;
}
.gridView thead tr a:hover
{
color: #06c;
background: url(../images/Icones/ico-ordem-hover.gif) left no-repeat;
}
/* ---->>> FooterStyle (rodapé) <<<------*/
.footer
{
height: 20px;
width: auto;
margin: 0 auto;
text-align: center;
padding: 5px;
}
/*PagerStyle*/
.footer a, .footer span
{
color: #555;
padding: 2px 6px 2px 6px;
border: 1px solid #bcbcbc;
background: #F1F1F1 url(../images/bg-pg.png) bottom repeat-x;
text-decoration: none;
}
.footer a:hover
{
color: #C40B17;
background-color: #fff;
background-image: none;
border: 1px solid #890812;
}
.footer span
{
color: #fff;
background: #D7403F url(../images/bg-pg-focus.png) bottom repeat-x;
border: 1px solid #890812;
}
/* ------------>>> Grid <<<--------------*/
.grid, .gridAlternada, .gridDestacada
{
font: 11px Arial,Verdana;
text-align: left;
text-align: center;
vertical-align: middle;
}
.grid:hover, .gridAlternada:hover, .gridDestacada:hover
{
color: #000;
background: #D4E5F6 url(../images/bg-dia.png) 0 0 repeat-x;
}
.grid
{
background-color: #fff;
}
/*RowStyle*/
.gridAlternada
{
background-color: #eee;
}
/*AlternatingRowStyle*/
.gridDestacada
{
background-color: #FFE082;
color: #333;
}
/*SelectedRowStyle / EditRowStyle*/
/* -------->>> Link Grid's <<<-----------*/
.grid a, .gridAlternada a, .gridDestacada a
{
color: #384249;
text-decoration: none;
}
.grid a:hover, .gridAlternada a:hover, .gridDestacada a:hover
{
color: #000;
text-decoration: underline;
}

A simple solution is after wrapping the first row in the <thead>, move the <thead> out of the <tbody> and prepend it to the table.
$( "tr" ).first().wrap( "<thead></thead>" ).parent().prependTo('.gridView');
Updated fiddle

jquery to highlight the selected row and column in a table

I want to highlight the complete row and column of the selected cell in a html table using jquery. I came across many examples using CSS but could not find using jquery. Please suggest.
Please find the fiddle : http://jsfiddle.net/0w9yo8x6/70/
Below is the html code:
<div>
<table>
<tr>
<td>
<table border="1px">
<tr>
<td></td>
<td bgcolor="grey">
<br>Column1
</td>
<td bgcolor="grey">
<br>Column2
</td>
<td bgcolor="grey">
<br>Column3
</td>
<td bgcolor="grey">
<br>Column4
</td>
<td bgcolor="grey">
<br>Column5
</td>
</tr>
<tr>
<td bgcolor="grey" >Row1</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data1 </td>
</tr>
</table>
</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data2 </td>
</tr>
</table>
</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data3 </td>
</tr>
</table>
</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data4 </td>
</tr>
</table>
</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data5 </td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="grey">Row2</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data1 </td>
</tr>
</table>
</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data2 </td>
</tr>
</table>
</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data3 </td>
</tr>
</table>
</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data4 </td>
</tr>
</table>
</td>
<td >
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data5 </td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="grey">Row3</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data1 </td>
</tr>
</table>
</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data2 </td>
</tr>
</table>
</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data3 </td>
</tr>
</table>
</td>
<td >
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data4 </td>
</tr>
</table>
</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data5 </td>
</tr>
</table>
</td>
</tr>
</table></td></tr></table></div>
--EDIT--
I cannot simplify/modify my table structure as it is generating dynamically and retrieving the values from database and display's in cells. With my existing structure as i shown in the question / fiddle http://jsfiddle.net/0w9yo8x6/70/ i need to achieve the row and column highlight.
Thanks.

CSS-Tricks covered a small tutorial on how to do this with JS/jQuery here:
http://css-tricks.com/row-and-column-highlighting/
The best way is shown here:
$("table").delegate('td','mouseover mouseleave', function(e) {
if (e.type == 'mouseover') {
$(this).parent().addClass("hover");
$("colgroup").eq($(this).index()).addClass("hover");
}
else {
$(this).parent().removeClass("hover");
$("colgroup").eq($(this).index()).removeClass("hover");
}
});
#page-wrap { width: 600px; margin: 0 auto; }
table { border-collapse: collapse; width: 100%; }
td, th { border: 1px solid #ccc; padding: 10px; }
.slim { width: 88px; }
.hover { background-color: #eee; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table border="1" width="100%">
<colgroup></colgroup>
<colgroup></colgroup>
<colgroup></colgroup>
<colgroup></colgroup>
<colgroup></colgroup>
<thead>
<tr>
<th>test</th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

You can simplify your table like this:
<table>
<tr><td> <td>Column1<td>Column2<td>Column3<td>Column4<td>Column5
<tr><td>Row1<td>Data1 <td>Data2 <td>Data3 <td>Data4 <td>Data5
<tr><td>Row2<td>Data1 <td>Data2 <td>Data3 <td>Data4 <td>Data5
<tr><td>Row3<td>Data1 <td>Data2 <td>Data3 <td>Data4 <td>Data5
</table>
Many people close trs and tds, but I choose not to, because those are optional closing tags in HTML5, and in my experience, they were never needed in HTML4. (Google's Style Guide also recommends omitting optional tags.)
All presentation styles should be done in a CSS style sheet, like this:
table {
border-spacing: 0px;
}
td {
border: 1px solid #bbb;
padding: 0.2em;
}
tr:first-child, td:first-child {
background: lightgrey;
}
.hovered {
background: yellow;
}
With jQuery, you can add a hover event to the table's tds, which toggle the hovered class for the td's parent row and all the tds in its column:
$('td').hover(function() {
$(this).parent('tr').toggleClass('hovered');
$('td:eq('+this.cellIndex+')','tr').toggleClass('hovered');
});
Fiddle
Edit
Since you can't change your layout, the highlighting functionality is a bit more difficult. In this case, you can use jQuery to change your multi-table layout to a single table:
$('table:first-child').replaceWith($('table', 'table:first-child').html());
$('table').each(function() {
var td= $('td', this);
if(td.length === 1) {
$(this).replaceWith(td.html());
}
});
This allows the highlighting code to work on your existing HTML.
New Fiddle

Draw a simple table with some cells without a border

I want to draw a table
P
Q [A B]
[C D]
where A, B, C, D are drawn with a border. Q and P are labels for the table and should not be drawn with a border. Q and P should be aligned with A.
How to achieve this? I can control which row to draw a border, but it won't help because I can't draw a border for the whole row.

td {
border: 1px solid #999;
padding: 10px;
}
td.no-border {
border: 0;
}
tr.no-border td {
border: 0;
}
<table>
<tr class="no-border">
<td></td>
<td colspan="2">p</td>
</tr>
<tr>
<td class="no-border">q</td>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td class="no-border"></td>
<td>c</td>
<td>d</td>
</tr>
</table>
I've created an ad hoc css class helper no-border, and applied it only to the cells I want to be borderless.

Do something like:
<table border="0" cellspacing="0">
<tr>
<th> </th>
<th>P</th>
<th> </th>
</tr>
<tr>
<th>Q</th>
<td class="border">A</td>
<td class="border">B</td>
</tr>
<tr>
<th> </th>
<td class="border">C</td>
<td class="border">D</td>
</tr>
</table>
Then use CSS:
td.border { border: 1px solid #000 }

This one is non table solution.
<div id="container">
<div class="row">
<div id="top">P</div>
</div>
<div class="row">
<div id="left">Q</div>
<div id="table">
<div class="row">
<div class="cell">A</div>
<div class="cell">B</div>
</div>
<div class="row">
<div class="cell">C</div>
<div class="cell">D</div>
</div>
<div class="row"></div>
</div>
</div>
</div>
CSS
.cell{
float:left;
width:50px;
border:1px solid #c0c0c0;
}
.row{
display:block;
overflow:auto;
}
#container{
display:block;
overflow:auto;
}
#top{
display:block;
overflow:auto;
margin-left:20px;
}
#left{
float:left;
overflow:auto;
}
#table{
float:left;
overflow:auto;
margin:5px;
margin-top:0px;
}
JSFiddle: http://jsfiddle.net/harendra/EUZru/

Does this solution (pure HTML) works for you ?
<table>
<tr>
<td></td>
<td colspan="2">P</td>
</tr>
<tr>
<td>Q</td>
<td rowspan="2">
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
</table>
example in jsfiddle