I made this block of code
<table>
{item.awards.map((obj,i) =>
<tbody>
<tr>
<td>Name</td>
<td>:</td>
<td>{obj.title}</td>
</tr>
<tr>
<td>Date</td>
<td>:</td>
<td>{obj.award}</td>
</tr>
{i !== item.awards.length-1 ? <hr /> : ''}
</tbody>
)}
</table>
It worked, every block has a separator (<hr/>) but the problem now is the hr length is not full width. I can't make the table 100% as it will effect the td.
It's invalid to have an hr as a direct child of tbody. tbody's content model only allows tr elements (and scripts). Even if it seems to work in one browser, there's no guarantee it will in another, or even in the next dot rev of the one where it used to work.
So you need to put the hr in a tr, which means putting it in a td or th:
{i !== item.awards.length-1 ? <tr><td colspan="3"><hr /></td></tr> : null}
You can then style the hr as necessary with CSS to make it as wide as you like. For instance (note the sep class on the separator rows and the CSS it applies to the row and the hr):
table {
border: 1px solid #ddd;
}
.sep hr {
position: absolute;
width: 100%;
margin-top: -0.1em;
}
.sep {
position: relative;
overflow: hidden;
height: 1em;
}
<table>
<tbody>
<tr>
<td>Name</td>
<td>:</td>
<td>{obj.title}</td>
</tr>
<tr>
<td>Date</td>
<td>:</td>
<td>{obj.award}</td>
</tr>
<tr class="sep">
<td colspan="3">
<hr />
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Name</td>
<td>:</td>
<td>{obj.title}</td>
</tr>
<tr>
<td>Date</td>
<td>:</td>
<td>{obj.award}</td>
</tr>
<tr class="sep">
<td colspan="3">
<hr />
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Name</td>
<td>:</td>
<td>{obj.title}</td>
</tr>
<tr>
<td>Date</td>
<td>:</td>
<td>{obj.award}</td>
</tr>
</tbody>
</table>
(Side note: null is a better choice than '' for the third operand of that conditional operator.)
Related
I have a task where I am trying to align four tables in a page which is then printed.
But for some reason I am unable to align them with same height. I have a constraint to use only <table> <tr><td> structure.
Below is the current picture, because the data is variant in each table:
And I am trying to achieve is the below because no matter which table has how much data, all of them should be of equal height:
Any help would be great.
Take a look at flexboxes:
.wrapper {
display: flex;
}
table {
display: flex;
margin-left: 5px;
border: 1px solid #000000;
}
<div class="wrapper">
<table>
<tr>
<td>Foo</td>
</tr>
</table>
<table>
<tr>
<td>Foo</td>
</tr>
<tr>
<td>Foo</td>
</tr>
<tr>
<td>Foo</td>
</tr>
</table>
<table>
<tr>
<td>Foo</td>
</tr>
<tr>
<td>Foo</td>
</tr>
</table>
</div>
Get each table's total number of rows. Then get the maximum from these numbers :
<script type="text/javascript">
function max(tab_num_rows) { // you put the numbers into an array
var ret = tab_num_rows[0];
for (var i=1 ; i<tab_num_rows.length; i++) {
if (ret < tab_num_rows[i])
ret = tab_num_rows[i];
}
return ret;
}
</script>
Then you make a JQuery to loop each table to add extra rows until the maximum is reached.
Flexbox will be the typical solution for this (see the other answer), however, if you are also restricted to NOT use flexbox (for example because of compatibility requirements to older browsers), you can put all four tables into the cells of one "wrapper table", like
.wrap {
width: 100%;
}
td {
background: #eee;
vertical-align: top;
}
<table class="wrap">
<tr>
<td>
<table>
<tr>
<td>One</td>
</tr>
<tr>
<td>One</td>
</tr>
<tr>
<td>One</td>
</tr>
<tr>
<td>One</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Two</td>
</tr>
<tr>
<td>Two</td>
</tr>
<tr>
<td>Two</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Three</td>
</tr>
<tr>
<td>Three</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Four</td>
</tr>
<tr>
<td>Four</td>
</tr>
<tr>
<td>Four</td>
</tr>
</table>
</td>
</tr>
</table>
How can I create two independent containers with fixed headers and scrollable body like this i have manage to create fixed table headers but i couldn't create scrollable body that both can scroll same time at vertically and only one can scroll horizontally.
Left side tree table and gantt chart both can be scroll horizontally, but right side Gantt chart only scrolls vertically.
Please check my code below, i hace acchived almost what i want, but i neet to fix two things
1) Need to fix the Header on table B but without breaking horizontal scroll behavior
2) How can Make both A & B vertical scrolls can happen at syncrounasly at same time, like when someone scrolls Table A table b alsp needto be scroll at the same time in vertically only.
like this link http://www.bryntum.com/playpen/react/ (add some task to activate the scroll)
PLEASE CHECK THIS CODE SNIPPET IN FULL PAGE
th, td{
padding: 10px 20px;
width: 100px;
}
th{
background: #fff;
}
td{
background: #efefef;
}
.fl{
float: left;
}
.panel_body{
height: 200px;
width: 430px;
overflow: hidden;
overflow-y:scroll;
}
.panel_body.scroll_h{
overflow-x: scroll;
width: 300px;
height: 240px;
}
.scroll_h table{
width: 500px;
}
<div class="panel">
<div class="fl panel_left">
<header>
<table>
<thead>
<tr>
<th>Table A</th>
<th>Start</th>
<th>End</th>
</tr>
</thead>
</table>
</header>
<section class="panel_body">
<table>
<tbody>
<tr>
<td>Name1</td>
<td>Start1</td>
<td>End1</td>
</tr>
<tr>
<td>Name2</td>
<td>Start2</td>
<td>End2</td>
</tr>
<tr>
<td>Name3</td>
<td>Start3</td>
<td>End3</td>
</tr>
<tr>
<td>Name4</td>
<td>Start4</td>
<td>End4</td>
</tr>
<tr>
<td>Name5</td>
<td>Start5</td>
<td>End5</td>
</tr>
<tr>
<td>Name6</td>
<td>Start6</td>
<td>End6</td>
</tr>
<tr>
<td>Name7</td>
<td>Start7</td>
<td>End7</td>
</tr>
<tr>
<td>Name8</td>
<td>Start8</td>
<td>End8</td>
</tr>
<tr>
<td>Name9</td>
<td>Start9</td>
<td>End9</td>
</tr>
<tr>
<td>Name10</td>
<td>Start10</td>
<td>End10</td>
</tr>
<tr>
<td>Name11</td>
<td>Start11</td>
<td>End11</td>
</tr>
<tr>
<td>Name12</td>
<td>Start12</td>
<td>End12</td>
</tr>
<tr>
<td>Name13</td>
<td>Start13</td>
<td>End13</td>
</tr>
<tr>
<td>Name14</td>
<td>Start14</td>
<td>End14</td>
</tr>
<tr>
<td>Name15</td>
<td>Start15</td>
<td>End15</td>
</tr>
<tr>
<td>Name16</td>
<td>Start16</td>
<td>End16</td>
</tr>
<tr>
<td>Name17</td>
<td>Start17</td>
<td>End17</td>
</tr>
<tr>
<td>Name18</td>
<td>Start18</td>
<td>End18</td>
</tr>
<tr>
<td>Name19</td>
<td>Start19</td>
<td>End19</td>
</tr>
<tr>
<td>Name20</td>
<td>Start20</td>
<td>End20</td>
</tr>
</tbody>
</table>
</section>
</div>
<di class="fl panel_right">
<section class="panel_body scroll_h">
<table>
<thead>
<tr>
<th>Table B</th>
<th>Start</th>
<th>End</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name1</td>
<td>Start1</td>
<td>End1</td>
</tr>
<tr>
<td>Name2</td>
<td>Start2</td>
<td>End2</td>
</tr>
<tr>
<td>Name3</td>
<td>Start3</td>
<td>End3</td>
</tr>
<tr>
<td>Name4</td>
<td>Start4</td>
<td>End4</td>
</tr>
<tr>
<td>Name5</td>
<td>Start5</td>
<td>End5</td>
</tr>
<tr>
<td>Name6</td>
<td>Start6</td>
<td>End6</td>
</tr>
<tr>
<td>Name7</td>
<td>Start7</td>
<td>End7</td>
</tr>
<tr>
<td>Name8</td>
<td>Start8</td>
<td>End8</td>
</tr>
<tr>
<td>Name9</td>
<td>Start9</td>
<td>End9</td>
</tr>
<tr>
<td>Name10</td>
<td>Start10</td>
<td>End10</td>
</tr>
<tr>
<td>Name11</td>
<td>Start11</td>
<td>End11</td>
</tr>
<tr>
<td>Name12</td>
<td>Start12</td>
<td>End12</td>
</tr>
<tr>
<td>Name13</td>
<td>Start13</td>
<td>End13</td>
</tr>
<tr>
<td>Name14</td>
<td>Start14</td>
<td>End14</td>
</tr>
<tr>
<td>Name15</td>
<td>Start15</td>
<td>End15</td>
</tr>
<tr>
<td>Name16</td>
<td>Start16</td>
<td>End16</td>
</tr>
<tr>
<td>Name17</td>
<td>Start17</td>
<td>End17</td>
</tr>
<tr>
<td>Name18</td>
<td>Start18</td>
<td>End18</td>
</tr>
<tr>
<td>Name19</td>
<td>Start19</td>
<td>End19</td>
</tr>
<tr>
<td>Name20</td>
<td>Start20</td>
<td>End20</td>
</tr>
</tbody>
</table>
</section>
</di>
</div>
With css and | or Js.
Define a width and height to the scrollable element.
Then use the overflow property:
#container {
width: 200px;
height: 200px;
overflow: scroll;
}
#container div {
width: 100%;
height: inherit;
}
#a { background: cornflowerblue; }
#b { background: brown; }
<div id="container">
<div id="a"></div>
<div id="b"></div>
</div>
You can set a horizontal/vertical scroll with overflow-x/overflow-y.
see MDN - overflow
PS: but please search for existing questions (and answers), post some code,etc. Here's an example but it will never fit your actual project.
I have a html table similar to this
I want to replace all the duplicate values in first TWO columns to be replaced with a null i.e an output similar to this
Added the html code below for reference
table, th, td {
border: 1px solid black;
}
table {
border-collapse: collapse;
}
<table >
<thead>
<tr >
<th>ABBEY </th>
<th>ANX </th>
<th>TPIN</th>
<th>ACP</th>
<th>4</th>
<th>3</th>
</tr>
</thead>
<tbody>
<tr>
<td>ABNAMRO </td>
<td>ANW </td>
<td>TPIN</td>
<td>ACP</td>
<td>32</td>
<td>32</td>
</tr>
<tr>
<td>ABNAMROLLC</td>
<td>MLD </td>
<td>TPIN</td>
<td>ACP</td>
<td>10</td>
<td>10</td>
</tr>
<tr>
<td>AMHERSTP </td>
<td>QPE</td>
<td>GRAM</td>
<td>ACP</td>
<td>341</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>GRAM</td>
<td>RJT</td>
<td>56</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>QPE </td>
<td>TPIN</td>
<td>ACP</td>
<td>24</td>
<td>19</td>
</tr>
<tr>
<td> </td>
<td>QPP</td>
<td>GRAM</td>
<td>ACP</td>
<td>353</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>GRAM</td>
<td>RJT</td>
<td>2</td>
<td> </td>
</tr>
<tr>
<td>BAKERGRP </td>
<td>JBC</td>
<td>GRAM</td>
<td>ACP</td>
<td>337</td>
<td>142</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>GRAM</td>
<td>RJT</td>
<td>3</td>
<td></td>
</tr>
</tbody>
</table>
Fiddle
Perhaps a little something like the following.
The columnsToProcess object should specify true for the zero-based column indices of the columns to process. For your stated requirement to do the first two columns only I could've just used a selector of "td:lt(2)" instead, but using an object to specify which columns to process is more versatile, in case, e.g., you later wanted to process the first, fourth, and sixth columns:
columnsToProcess = { 0: true, 3: true, 5: true }
The lastVals object keeps track of the last changed value for each column. There's no need to initialise its elements at all because when we test lastVals[i] it will just return undefined if not yet initialised, and undefined is not equal to any string.
var columnsToProcess = {
0: true,
1: true
};
var lastVals = {};
$("table tbody tr").each(function() { // for each row
$(this).find("td").each(function(i) { // for each cell in the current row
if (!columnsToProcess[i]) return; // do we care about this column?
if (this.innerHTML === lastVals[i]) // if value is same as the previous row
this.innerHTML = " "; // blank out the cell
else // otherwise
lastVals[i] = this.innerHTML; // remember the current value
});
});
table, th, td { border: 1px solid black; }
table { border-collapse: collapse; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<thead>
<tr><th>ABBEY</th><th>ANX</th><th>TPIN</th><th>ACP</th><th>4</th><th>3</th></tr>
</thead>
<tbody>
<tr><td>ABNAMRO</td><td>ANW</td><td>TPIN</td><td>ACP</td><td>32</td><td>32</td></tr>
<tr><td>ABNAMROLLC</td><td>MLD</td><td>TPIN</td><td>ACP</td><td>10</td><td>10</td></tr>
<tr><td>AMHERSTP</td><td>QPE</td><td>GRAM</td><td>ACP</td><td>341</td><td> </td></tr>
<tr><td>AMHERSTP</td><td>QPE</td><td>GRAM</td><td>RJT</td><td>56</td><td> </td></tr>
<tr><td>AMHERSTP</td><td>QPE</td><td>TPIN</td><td>ACP</td><td>24</td><td>19</td></tr>
<tr><td>AMHERSTP</td><td>QPP</td><td>GRAM</td><td>ACP</td><td>353</td><td> </td></tr>
<tr><td>AMHERSTP</td><td>QPP</td><td>GRAM</td><td>RJT</td><td>2</td><td> </td></tr>
<tr><td>BAKERGRP</td><td>JBC</td><td>GRAM</td><td>ACP</td><td>337</td><td>142</td></tr>
<tr><td>BAKERGRP</td><td>JBC</td><td>GRAM</td><td>RJT</td><td>3</td><td></td></tr>
</tbody>
</table>
Left as an exercise for the reader: trimming whitespace before comparing the values, if "AMHERSTP" and "AMHERSTP " are supposed to be considered equal.
I have a table that has a few items inside, and a button for each that will display more information on the specific item on the menu.
my HTML table is below
<table id="menu_breads">
<thead>
<tr>
<th colspan="2">BREADS</th>
</tr>
<tr>
<th>ITEM</th>
<th>PRICE</th>
</tr>
</thead>
<tbody>
<tr>
<td>Portugese Rolls
<button class="myButton">˅</button>
</td>
<td>R1.49</td>
</tr>
<tr>
<td colspan="2" class="more">A hand made selection of Portugese rolls</td>
</tr>
<tr>
<td>Hotdog Buns
<button class="myButton">˅</button>
</td>
<td>R0.99</td>
<tr>
<td colspan="2" class="more">A hand made selection of Hotdog buns</td>
</tr>
</tr>
<tr>
<td>French Loaf
<button class="myButton">˅</button>
</td>
<td>R3.49</td>
<tr>
<td colspan="2" class="more">A hand made selection of French loaves</td>
</tr>
</tr>
<tr>
<td>Sead Roll
<button class="myButton">˅</button>
</td>
<td>R2.49</td>
<tr>
<td colspan="2" class="more">A hand made selection of Seed Rolls</td>
</tr>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">
<h6>Prices may change without prior warning</h6>
</td>
</tr>
</tfoot>
</table>
<!-- TABLE FOR CONFECTIONARIES -->
<table id="menu_confect">
<thead>
<tr>
<th colspan="2">CONFECTIONARIES</th>
</tr>
<tr>
<th>ITEM (per slice)</th>
<th>PRICE</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cream Slice
<button class="myButton">˅</button>
</td>
<td>R12.49</td>
<tr>
<td colspan="2" class="more">A hand made selection of Cream slices</td>
</tr>
</tr>
<tr>
<td>Chocolate Cake
<button class="myButton">˅</button>
</td>
<td>R15.99</td>
<tr>
<td colspan="2" class="more">A hand made selection of Chocolate cakes</td>
</tr>
</tr>
<tr>
<td>Coconut Eclaire
<button class="myButton">˅</button>
</td>
<td>R2.49</td>
<tr>
<td colspan="2" class="more">A hand made selection of Coconut Eclairs</td>
</tr>
</tr>
<tr>
<td>Chocolate Eclaire
<button class="myButton">˅</button>
</td>
<td>R4.49</td>
<tr>
<td colspan="2" class="more">A hand made selection of chocolate Eclairs</td>
</tr>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">
<h6>Prices may change without prior warning</h6>
</td>
</tr>
</tfoot>
</table>
My CSS is here
.myButton {
background: #183C4C;
border-radius: 31%;
border:2px solid #4e6096;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:11px;
text-decoration:none;
width: 15%;
float: right;
}
.more {
display: none;
}
Demo
and the jquery is what I am having a bit of a problem understanding. Would I need to ID every td that I want to display or can I do it with classes and an on click toggle event?
I have managed to get it to display on click, the problem is that all the hidden rows display and not just the individual one.
$(document).ready(function(){
$('.myButton').click(function(){
$(this).closest('tr').next().find('.more').toggle();
if ($(this).closest('tr').is(":visible")) {
$(this).html("˄")
}
else {
$(this).html("˅")
}
});
});
You wouldn't have to give IDs to every td, that'd be overkill. You want something dynamic. Assuming that your HTML structure will stay the same, you can do:
EDIT: Added the ability to toggle plus and minus icons from comments
$(".myButton").on("click", function () {
var more = $(this).closest("tr").next("tr").find(".more");
more.toggle();
if (more.is(":visible")) {
//show minus icon, hide plus
}
else {
//show plus icon, hide minus
}
});
DEMO (thanks Rory)
The more should be given to the tr - also your markup is not valid(you have a tr as child of tr - the more tr is child of the button tr)
<tr>
<td>Portugese Rolls
<button class="myButton">˅</button>
</td>
<td>R1.49</td>
</tr>
<tr class="more">
<td colspan="2">A hand made selection of Portugese rolls</td>
</tr>
then
$('.myButton').click(function(){
$(this).closest('tr').next().toggle();
})
Demo: Fiddle
If you don't want to change anything
$('.myButton').click(function(){
$(this).closest('tr').next().find('.more').toggle();
})
Demo: Fiddle
Have you tried this:
$(".myButton").on("click",function() {
$(this).closest("tr").toggle();
})
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