I have found a table example that would be roughly what I am after, however so it doesn't conflict with other tables on the page I need it to affect classes and not the td and tr tags direct.
Is this even possible? If so the example I have below is what it should look like and the jsfiddle is what it is doing after changing to classes.
Example working:
http://codepen.io/rglazebrook/pen/nAzgy
<script>
$('td').hover(function() {
$(this).parents('table').find('col:eq('+$(this).index()+')').toggleClass('hover' );
});
</script>
<style type="text/css">
body {
font: 16px/1.5 Helvetica, Arial, sans-serif;
}
table {
width: 80%;
margin: 20px auto;
border-collapse: collapse;
}
table th {
text-align: left;
}
table tr, table col {
transition: all .3s;
}
table tbody tr:hover {
background-color: rgba(0, 140, 203, 0.2);
}
table col.hover {
background-color: rgba(0, 140, 203, 0.2);
}
</style>
<div style="width:700px;">
<table>
<col />
<col />
<col />
<col />
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Birthdate</th>
<th>Preferred Hat Style</th>
</tr>
</thead>
<tbody>
<tr>
<td>Abraham Lincoln</td>
<td>204</td>
<td>February 12</td>
<td>Stovepipe</td>
</tr>
<tr>
<td>Winston Churchill</td>
<td>139</td>
<td>November 30</td>
<td>Homburg</td>
</tr>
<tr>
<td>Rob Glazebrook</td>
<td>32</td>
<td>August 6</td>
<td>Flat Cap</td>
</tr>
</tbody>
</table>
</div>
jsfiddle not working (after change):
https://jsfiddle.net/pr007qy8/
<script language="javascript">
hideTag('LeftPane');
</script>
<script>
$('.data').hover(function() {
$(this).parents('.tble').find('col:eq('+$(this).index()+')').toggleClass('hover');
});
</script>
<style type="text/css">
body {
font: 16px/1.5 Helvetica, Arial, sans-serif;
}
.tble {
width: 80%;
margin: 20px auto;
border-collapse: collapse;
}
.tble .header {
text-align: left;
}
.tble .rows, .tble col {
transition: all .3s;
}
.tble tbody .rows:hover {
background-color: rgba(0, 140, 203, 0.2);
}
.tble col.hover {
background-color: rgba(0, 140, 203, 0.2);
}
</style>
<div style="width:700px;">
<table class="tble">
<col />
<col />
<col />
<col />
<thead>
<tr class="rows">
<th class="header">Name</th>
<th class="header">Age</th>
<th class="header">Birthdate</th>
<th class="header">Preferred Hat Style</th>
</tr>
</thead>
<tbody>
<tr class="rows">
<td class="data">Abraham Lincoln</td>
<td class="data">204</td>
<td class="data">February 12</td>
<td class="data">Stovepipe</td>
</tr>
<tr class="rows">
<td class="data">Winston Churchill</td>
<td class="data">139</td>
<td class="data">November 30</td>
<td class="data">Homburg</td>
</tr>
<tr class="rows">
<td class="data">Rob Glazebrook</td>
<td class="data">32</td>
<td class="data">August 6</td>
<td class="data">Flat Cap</td>
</tr>
</tbody>
</table>
</div>
Thanks
Add class to your table, for example my-table. And use it in js - $(this).parents('.my-table').
// CSS Newbie article here:
// http://www.cssnewbie.com/simple-table-column-highlighting/
$('td').hover(function() {
$(this).parents('.my-table').find('col:eq('+$(this).index()+')').toggleClass('hover');
});
body {
font: 16px/1.5 Helvetica, Arial, sans-serif;
}
table {
width: 80%;
margin: 20px auto;
border-collapse: collapse;
}
table th {
text-align: left;
}
table tr, table col {
transition: all .3s;
}
table tbody tr:hover {
background-color: rgba(0, 140, 203, 0.2);
}
table col.hover {
background-color: rgba(0, 140, 203, 0.2);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="my-table">
<col />
<col />
<col />
<col />
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Birthdate</th>
<th>Preferred Hat Style</th>
</tr>
</thead>
<tbody>
<tr>
<td>Abraham Lincoln</td>
<td>204</td>
<td>February 12</td>
<td>Stovepipe</td>
</tr>
<tr>
<td>Winston Churchill</td>
<td>139</td>
<td>November 30</td>
<td>Homburg</td>
</tr>
<tr>
<td>Rob Glazebrook</td>
<td>32</td>
<td>August 6</td>
<td>Flat Cap</td>
</tr>
</tbody>
</table>
I would add a class so that you can use it on all tables you want to apply this affect to, then you can change your css and js as follows to target only tables with this class:
$('.hover-table').find('td').hover(function() { // only find tds in hover tables
var currentTd = $(this);
currentTd.closest('table').find('col:eq(' + currentTd.index() + ')').toggleClass('hover'); // I would use closest in case your table is nested
});
body {
font: 16px/1.5 Helvetica, Arial, sans-serif;
}
.hover-table {
width: 80%;
margin: 20px auto;
border-collapse: collapse;
}
.hover-table th {
text-align: left;
}
.hover-table tr,
.hover-table col {
transition: all .3s;
}
.hover-table tbody tr:hover,
.hover-table col.hover {
background-color: rgba(0, 140, 203, .2);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="hover-table">
<col />
<col />
<col />
<col />
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Birthdate</th>
<th>Preferred Hat Style</th>
</tr>
</thead>
<tbody>
<tr>
<td>Abraham Lincoln</td>
<td>204</td>
<td>February 12</td>
<td>Stovepipe</td>
</tr>
<tr>
<td>Winston Churchill</td>
<td>139</td>
<td>November 30</td>
<td>Homburg</td>
</tr>
<tr>
<td>Rob Glazebrook</td>
<td>32</td>
<td>August 6</td>
<td>Flat Cap</td>
</tr>
</tbody>
</table>
Please check the snippet.
// CSS Newbie article here:
// http://www.cssnewbie.com/simple-table-column-highlighting/
$('.myTd').hover(function() {
$(this).parents('.myTable').find('.myCol:eq(' + $(this).index() + ')').toggleClass('hover');
});
body {
font: 16px/1.5 Helvetica, Arial, sans-serif;
}
.myTable {
width: 80%;
margin: 20px auto;
border-collapse: collapse;
}
.textLeft {
text-align: left;
}
.myTr,
.myCol {
transition: all .3s;
}
.mytBody .myTr:hover {
background-color: rgba(0, 140, 203, .2);
}
.myCol.hover {
background-color: rgba(0, 140, 203, .2);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="myTable">
<col class="myCol" />
<col class="myCol" />
<col class="myCol" />
<col class="myCol" />
<thead>
<tr>
<th class="textLeft">Name</th>
<th class="textLeft">Age</th>
<th class="textLeft">Birthdate</th>
<th class="textLeft">Preferred Hat Style</th>
</tr>
</thead>
<tbody class="mytBody">
<tr class="myTr">
<td class="myTd">Abraham Lincoln</td>
<td class="myTd">204</td>
<td class="myTd">February 12</td>
<td class="myTd">Stovepipe</td>
</tr>
<tr class="myTr">
<td class="myTd">Winston Churchill</td>
<td class="myTd">139</td>
<td class="myTd">November 30</td>
<td class="myTd">Homburg</td>
</tr>
<tr class="myTr">
<td class="myTd">Rob Glazebrook</td>
<td class="myTd">32</td>
<td class="myTd">August 6</td>
<td class="myTd">Flat Cap</td>
</tr>
</tbody>
</table>
Related
I am making a page with tabular data is scrollable with main page scrollbar but with keeping table header visible. There's a page header that sticks on top and pagination area that sticks on bottom on the page.
I gave it a try here.
var dataHeader = document.querySelector('.data thead');
var scrollValue = 50;
window.onscroll = function () {
if (document.body.scrollTop > scrollValue || document.documentElement.scrollTop > scrollValue) {
dataHeader.className = "fixed";
} else {
dataHeader.className = "";
}
};
.main {
position: relative;
top: 0;
width: 700px;
margin: 0 auto;
}
.header {
position: fixed;
top: 0;
background-color: #abc;
width: 700px;
z-index: 10;
}
.content {
position: relative;
top: 60px;
background: #cfe;
}
.content-header {
color: blue;
padding-top: 10px;
}
.data {
position: relative;
margin-bottom: 18px;
}
.data table {
border-collapse: collapse;
width: 700px;
}
.data thead {
background: grey;
width: 700px;
display: table-header-group;
}
.data tbody {
width: 700px;
}
.data thead.fixed {
position: fixed;
top: 80px;
}
.data thead.fixed th {
width: 90px;
}
.paging {
position: absolute;
bottom: 0;
background-color: black;
color: white;
width: 700px;
}
.column {
padding: 2;
width: 80px;
}
<div class="main">
<div class="header">
<h1>Super Page</h1>
</div>
<div class="content">
<div class="content-header">
<h2>Beautiful Content</h2>
</div>
<div class="data">
<table>
<colgroup>
<col class="column">
<col class="column">
<col class="column">
</colgroup>
<thead>
<tr>
<th class="column">Sr</th>
<th class="column">City</th>
<th class="column">Country</th>
</tr>
<thead>
<tbody>
<tr>
<td>1</td>
<td>Amsterdam</td>
<td>Netherlands</td>
</tr>
<tr>
<td>2</td>
<td>Lahore</td>
<td>Pakistan</td>
</tr>
<tr>
<td>3</td>
<td>Doha</td>
<td>Qatar</td>
</tr>
<tr>
<td>4</td>
<td>Mumbai</td>
<td>India</td>
</tr>
<tr>
<td>5</td>
<td>Rotterdam</td>
<td>Netherlands</td>
</tr>
<tr>
<td>6</td>
<td>Amsterdam</td>
<td>Netherlands</td>
</tr>
<tr>
<td>7</td>
<td>Lahore</td>
<td>Pakistan</td>
</tr>
<tr>
<td>8</td>
<td>Doha</td>
<td>Qatar</td>
</tr>
<tr>
<td>9</td>
<td>Mumbai</td>
<td>India</td>
</tr>
<tr>
<td>10</td>
<td>Rotterdam</td>
<td>Netherlands</td>
</tr>
<tr>
<td>11</td>
<td>Amsterdam</td>
<td>Netherlands</td>
</tr>
<tr>
<td>12</td>
<td>Lahore</td>
<td>Pakistan</td>
</tr>
<tr>
<td>13</td>
<td>Doha</td>
<td>Qatar</td>
</tr>
<tr>
<td>14</td>
<td>Mumbai</td>
<td>India</td>
</tr>
<tr>
<td>15</td>
<td>Rotterdam</td>
<td>Netherlands</td>
</tr>
<tr>
<td>16</td>
<td>Amsterdam</td>
<td>Netherlands</td>
</tr>
<tr>
<td>17</td>
<td>Lahore</td>
<td>Pakistan</td>
</tr>
<tr>
<td>18</td>
<td>Doha</td>
<td>Qatar</td>
</tr>
<tr>
<td>19</td>
<td>Mumbai</td>
<td>India</td>
</tr>
<tr>
<td>20</td>
<td>Rotterdam</td>
<td>Netherlands</td>
</tr>
<tr>
<td>21</td>
<td>Prague</td>
<td>Czech Republic</td>
</tr>
</tbody>
</table>
</div>
<!-- /.data -->
<div class="paging">
Displaying 10 of 100 records
</div>
</div>
<!-- /.content -->
</div>
<!-- /.main -->
The only problem is when I scroll down, table header kind of collapses and does not remain aligned with table body's columns. How Can I fix it?
You can adjust your .data thead.fixed th rule to width: calc(700px/3); like so:
var dataHeader = document.querySelector('.data thead');
var scrollValue = 50;
window.onscroll = function () {
if (document.body.scrollTop > scrollValue || document.documentElement.scrollTop > scrollValue) {
dataHeader.className = "fixed";
} else {
dataHeader.className = "";
}
};
.main {
position: relative;
top: 0;
width: 700px;
margin: 0 auto;
}
.header {
position: fixed;
top: 0;
background-color: #abc;
width: 700px;
z-index: 10;
}
.content {
position: relative;
top: 60px;
background: #cfe;
}
.content-header {
color: blue;
padding-top: 10px;
}
.data {
position: relative;
margin-bottom: 18px;
}
.data table {
border-collapse: collapse;
width: 700px;
}
.data thead {
background: grey;
width: 700px;
display: table-header-group;
}
.data tbody {
width: 700px;
}
.data thead.fixed {
position: fixed;
top: 80px;
}
.data thead.fixed th {
width: calc(700px/3);
}
.paging {
position: absolute;
bottom: 0;
background-color: black;
color: white;
width: 700px;
}
.column {
padding: 2;
width: 80px;
<div class="main">
<div class="header">
<h1>Super Page</h1>
</div>
<div class="content">
<div class="content-header">
<h2>Beautiful Content</h2>
</div>
<div class="data">
<table>
<colgroup>
<col class="column">
<col class="column">
<col class="column">
</colgroup>
<thead>
<tr>
<th class="column">Sr</th>
<th class="column">City</th>
<th class="column">Country</th>
</tr>
<thead>
<tbody>
<tr>
<td>1</td>
<td>Amsterdam</td>
<td>Netherlands</td>
</tr>
<tr>
<td>2</td>
<td>Lahore</td>
<td>Pakistan</td>
</tr>
<tr>
<td>3</td>
<td>Doha</td>
<td>Qatar</td>
</tr>
<tr>
<td>4</td>
<td>Mumbai</td>
<td>India</td>
</tr>
<tr>
<td>5</td>
<td>Rotterdam</td>
<td>Netherlands</td>
</tr>
<tr>
<td>6</td>
<td>Amsterdam</td>
<td>Netherlands</td>
</tr>
<tr>
<td>7</td>
<td>Lahore</td>
<td>Pakistan</td>
</tr>
<tr>
<td>8</td>
<td>Doha</td>
<td>Qatar</td>
</tr>
<tr>
<td>9</td>
<td>Mumbai</td>
<td>India</td>
</tr>
<tr>
<td>10</td>
<td>Rotterdam</td>
<td>Netherlands</td>
</tr>
<tr>
<td>11</td>
<td>Amsterdam</td>
<td>Netherlands</td>
</tr>
<tr>
<td>12</td>
<td>Lahore</td>
<td>Pakistan</td>
</tr>
<tr>
<td>13</td>
<td>Doha</td>
<td>Qatar</td>
</tr>
<tr>
<td>14</td>
<td>Mumbai</td>
<td>India</td>
</tr>
<tr>
<td>15</td>
<td>Rotterdam</td>
<td>Netherlands</td>
</tr>
<tr>
<td>16</td>
<td>Amsterdam</td>
<td>Netherlands</td>
</tr>
<tr>
<td>17</td>
<td>Lahore</td>
<td>Pakistan</td>
</tr>
<tr>
<td>18</td>
<td>Doha</td>
<td>Qatar</td>
</tr>
<tr>
<td>19</td>
<td>Mumbai</td>
<td>India</td>
</tr>
<tr>
<td>20</td>
<td>Rotterdam</td>
<td>Netherlands</td>
</tr>
<tr>
<td>21</td>
<td>Prague</td>
<td>Czech Republic</td>
</tr>
</tbody>
</table>
</div>
<!-- /.data -->
<div class="paging">
Displaying 10 of 100 records
</div>
</div>
<!-- /.content -->
</div>
<!-- /.main -->
In my table I have a some values in a column that span over multiple rows. When I hover over this value only one row is hilighted (the row containing the actual value). My question is, is there anyway to hilight the other rows when hovering on the value that spans over them ?
here is a code example :
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
tr:hover{background-color:#f5f5f5}
<h2>Hoverable Table</h2>
<p>Move the mouse over the table rows to see the effect.</p>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td rowspan="2">$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td rowspan="2">$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
</tr>
</table>
If your question is about when hovering $100, both Peter and Lois rows should get highlighted then you cannot do it with css alone as per my understanding. You are suppose to go for js scripts.
Check below snippet for reference. Hover on td with rowspan. Hope this helps.
$('.hasRowSpan').hover(function(){
$(this).closest('tr').toggleClass('bg-red');
$(this).closest('tr').next('tr').toggleClass('bg-red');
});
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
tr:hover{background-color:red}
.bg-red{
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td class="hasRowSpan" rowspan="2">$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td class="hasRowSpan" rowspan="2">$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
</tr>
</table>
Update: You can use nextAll() when rowspan has more than 2 rows.
Find below updated snippet as per your comment.
$('tr').hover(function() {
if ($(this).find('td').hasClass('hasRowSpan')) {
$(this).next('tr').toggleClass('bg-red');
}
if ($(this).prev('tr').find('td').hasClass('hasRowSpan')) {
$(this).prev('tr').toggleClass('bg-red');
}
});
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
tr:hover {
background-color: red
}
.bg-red {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td class="hasRowSpan" rowspan="2">$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
<tr>
<td>David</td>
<td>Rijo</td>
<td>$500</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td class="hasRowSpan" rowspan="2">$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
</tr>
</table>
Update 1: I just updated the script as per your comment here. Note: Am sure this won't be working if you have rowspan more than 2.
$('.hasRowSpan').hover(function() {
$(this).closest('tr').toggleClass('bg-red');
$(this).closest('tr').next('tr').toggleClass('bg-red');
});
$('tr').hover(function() {
if ($(this).prev('tr').find('td').hasClass('hasRowSpan')) {
$(this).prev('tr').find('td.hasRowSpan').toggleClass('bg-red');
}
});
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
tr:hover {
background-color: red
}
.bg-red {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td class="hasRowSpan" rowspan="2">$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
<tr>
<td>David</td>
<td>Rijo</td>
<td>$500</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td class="hasRowSpan" rowspan="2">$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
</tr>
</table>
Update 2: Check above snippet, I have changed my code as per your desired output.
I am trying to add cells (selected user wish) form of a record from user list to final list table when user clicks on GET RECORD Button Type Of Div.
How can I approach this functionality?
$(document).ready(function() {
$('#table-txt td').mouseover(function() {
$(this).addClass('td-bg');
});
$('#table-txt td').mouseout(function() {
$('td').removeClass('td-bg');
});
$('#table-txt td').click(function() {
$('#table-txt td').removeClass('td-bg');
$(this).toggleClass('active');
});
$('#getrow').click(function() {
getrecord();
});
});
function getrecord() {
alert('How to get that Record to second table');
}
table,
tr,
th,
td {
border: 1px solid #dddddd;
border-collapse: collapse;
}
.td-bg {
background: #006597;
color: #fff;
opacity: 0.7;
cursor: pointer;
}
.block-header {
background: #006597;
color: #fff;
}
.block-header th {
text-align: center;
}
.active {
background: #006597;
color: #fff;
}
.addrow {
width: 10%;
height: 125px;
background: #006597;
float: left;
text-align: center;
color: #fff;
line-height: 100px;
cursor: pointer;
word-wrap: break-word;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:45%; float:left;" id="table-txt">
<tr class="block-header">
<th colspan="4">User List</th>
</tr>
<tr height="25" class="block-header">
<th width="25%">Name</th>
<th width="25%">Age</th>
<th width="25%">Gender</th>
<th width="25%">Salary</th>
</tr>
<tr height="25">
<td>Samudrala</td>
<td>50</td>
<td>M</td>
<td>XYZ</td>
</tr>
<tr height="25">
<td>Samudrala</td>
<td>50</td>
<td>M</td>
<td>XYZ</td>
</tr>
<tr height="25">
<td>Samudrala</td>
<td>50</td>
<td>M</td>
<td>XYZ</td>
</tr>
</table>
<div class="addrow" id="getrow">GET RECORD</div>
<table style="width:45%; float:right;">
<tr class="block-header">
<th colspan="4">Final List</th>
</tr>
<tr height="25" class="block-header">
<th width="25%">Name</th>
<th width="25%">Age</th>
<th width="25%">Gender</th>
<th width="25%">Salary</th>
</tr>
<tr height="25">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr height="25">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr height="25">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
You can use cellIndex and parentNode.rowIndex to trigger the positions and store the selected values in an array using map() function.
Check this snippet:
$(document).ready(function() {
$('#table-txt td').click(function() {
$(this).addClass('td-bg');
var arr = $(this).map(function() {
return $(this).text();
}).get();
$(this).each(function() {
var rI = this.cellIndex;
var cI = this.parentNode.rowIndex;
var sel = $('#table-right tr:eq(' + cI + ') td:eq(' + rI + ')');
$('#getrow').click(function() {
$('td').removeClass('td-bg');
sel.html(arr);
});
});
});
});
table,
tr,
th,
td {
border: 1px solid #dddddd;
border-collapse: collapse;
}
.td-bg {
background: #006597;
color: #fff;
opacity: 0.7;
cursor: pointer;
}
.block-header {
background: #006597;
color: #fff;
}
.block-header th {
text-align: center;
}
.active {
background: #006597;
color: #fff;
}
.addrow {
width: 10%;
height: 125px;
background: #006597;
float: left;
text-align: center;
color: #fff;
line-height: 100px;
cursor: pointer;
word-wrap: break-word;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:45%; float:left;" id="table-txt">
<tr class="block-header">
<th colspan="4">User List</th>
</tr>
<tr height="25" class="block-header">
<th width="25%">Name</th>
<th width="25%">Age</th>
<th width="25%">Gender</th>
<th width="25%">Salary</th>
</tr>
<tr height="25">
<td>Samudrala</td>
<td>50</td>
<td>M</td>
<td>XYZ</td>
</tr>
<tr height="25">
<td>Samudrala</td>
<td>51</td>
<td>F</td>
<td>PQR</td>
</tr>
<tr height="25">
<td>Samudrala</td>
<td>52</td>
<td>M</td>
<td>ABC</td>
</tr>
</table>
<div class="addrow" id="getrow">GET RECORD</div>
<table style="width:45%; float:right;" id="table-right">
<tr class="block-header">
<th colspan="4">Final List</th>
</tr>
<tr height="25" class="block-header">
<th width="25%">Name</th>
<th width="25%">Age</th>
<th width="25%">Gender</th>
<th width="25%">Salary</th>
</tr>
<tr height="25">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr height="25">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr height="25">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
I have made some modifications to your code (Your table markup etc) and I think it has done what you want here is my final code:
$(document).ready(function(){
$('#table-txt td').mouseover(function(){
$(this).addClass('td-bg');
});
$('#table-txt td').mouseout(function(){
$('td').removeClass('td-bg');
});
$('#table-txt tr').click(function(){ //I modified this line
$('#table-txt tr td').removeClass('td-bg');//And this
$(this).toggleClass('active');
});
$('#getrow').click(function(){
getrecord();
});
});
function getrecord(){
var $trs = $('#table-txt tbody tr.active').clone(true);
$("#finalListTable tbody").append($trs);
}
table,
tr,
th,
td {
border: 1px solid #dddddd;
border-collapse: collapse;
}
.td-bg {
background: #006597;
color: #fff;
opacity: 0.7;
cursor: pointer;
}
.block-header {
background: #006597;
color: #fff;
}
.block-header th {
text-align: center;
}
.active {
background: #006597;
color: #fff;
}
.addrow {
width: 10%;
height: 125px;
background: #006597;
float: left;
text-align: center;
color: #fff;
line-height: 100px;
cursor: pointer;
word-wrap: break-word;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:45%; float:left;" id="table-txt">
<thead>
<tr class="block-header">
<th colspan="4">User List</th>
</tr>
<tr height="25" class="block-header">
<th width="25%">Name</th>
<th width="25%">Age</th>
<th width="25%">Gender</th>
<th width="25%">Salary</th>
</tr>
</thead>
<tbody>
<tr height="25">
<td>Samudrala</td>
<td>50</td>
<td>M</td>
<td>XYZ</td>
</tr>
<tr height="25">
<td>Samudrala</td>
<td>50</td>
<td>M</td>
<td>XYZ</td>
</tr>
<tr height="25">
<td>Samudrala</td>
<td>50</td>
<td>M</td>
<td>XYZ</td>
</tr>
</tbody>
</table>
<div class="addrow" id="getrow">GET RECORD</div>
<table id="finalListTable" style="width:45%; float:right;">
<thead>
<tr class="block-header">
<th colspan="4">Final List</th>
</tr>
<tr>
<th width="25%">Name</th>
<th width="25%">Age</th>
<th width="25%">Gender</th>
<th width="25%">Salary</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<!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.