We Keep Coding

How to avoid blank spaces in top of table in HTML

I am very new to HTML and I was tasked to delete blank spaces on top of table entries.
Currently, it's displaying like this.
enter image description here
I tried a couple of ways but not successfully. I really appreciate your guidance on this.
So it's displaying blank spaces before table data. Is it possible to remove that space..?
Here is my style sheet
<style type="text/css">
p {padding:0; margin:0} .container {font-family:'Arial Unicode MS'; font-size:10px; margin:0 auto; width:100%} .logo-title {overflow:hidden;font-size:10px} .logo-title .title-txt {float:right; width:50%; padding:30px 0 0 0; font-size:10px;} .logo-title .logo {float:left; width:50%;} .title{clear:both; text-align:center; font-size:18px} .Ts_and_Cs table {border: 1px solid #000000; border-collapse: collapse} .Ts_and_Cs table th {border: 1px solid #000000; background:#FFFFFF; color:#000000; text-align:center; font-size:10px} .Ts_and_Cs table td {border: 1px solid #000000; background:#FFFFFF; color:#000000; text-align:left; font-size:8px} .NoHeader {page:LastPage;page-break-before:always; page-break-inside: avoid;}#pageFooter:after { counter-increment: page; content: counter(page) " of " counter(pages);} #media print{ div.header { margin-top:50px; position: running(header); word-wrap: break-word; font-color: #000000; background:#FFFFFF; border: 1px solid #000000; } div.footer{ display: block; text-align:center; font-size:9px; position:running(footer);height:50px; } } #page { #top-center{ content:element(header);} margin-top:650px; margin-left:50px; margin-bottom:50px; margin-right:50px; #bottom-center {content: element(footer);} } #page LastPage{ #top-center{content: hidden;} margin-top:50px; margin-bottom:50px; margin-left:50px; margin-right:50px; #bottom-center {content: element(footer);}}</style>
My table data code with header
<table cellspacing="0" style="border:1px solid black; border-collapse:collapse; padding:10px;font-size:10px;text-align:center" width="100%">
<tbody>
<tr>
<td width="10%">
<strong>{{$D.Work_Order.SMAX_PS_Translation__c.SMAX_PS_Quantity__c}}</strong>
</td>
<td width="20%">
<strong>{{$D.Work_Order.SMAX_PS_Translation__c.SMAX_PS_Part_Number__c}}</strong>
</td>
<td width="40%">
<strong>{{$D.Work_Order.SMAX_PS_Translation__c.SMAX_PS_Part_Description__c}}</strong>
</td>
<td width="10%">
<strong>{{$D.Work_Order.SMAX_PS_Translation__c.SMAX_PS_Base_Price__c}}</strong>
</td>
<td width="10%">
<strong>{{$D.Work_Order.SMAX_PS_Translation__c.SMAX_PS_Discount__c}}</strong>
</td>
<td width="10%">
<strong>{{$D.Work_Order.SMAX_PS_Translation__c.SMAX_PS_Total_Price__c}}</strong>
</td>
</tr>
</tbody>
</table>
</div>
<!-- table 6 end --><!-- This is the end of the header -->
<table cellpadding="0" cellspacing="0" style="border-collapse:collapse;font-size:10px;text-align:left; page-break-inside: avoid;valign:top;" svmx-data="{{$D.Parts}}" width="100%">
<thead>
<tr>
<th style="text-align:left;valign:top;" svmx-data="{{$F.IF($D.Parts.SVMXC__Actual_Quantity2__c, $D.Parts.SVMXC__Actual_Quantity2__c, "N/A")}}" width="10%">
</th>
<th style="text-align:left;valign:top;" svmx-data="{{$F.IF($D.Parts.SMAX_PS_Part_Number__c, $D.Parts.SMAX_PS_Part_Number__c, "N/A")}}" width="20%">
</th>
<th style="text-align:left;valign:top;" svmx-data="{{$F.IF($D.Parts.SMAX_PS_Concat_Part_Work_Description__c, $D.Parts.SMAX_PS_Concat_Part_Work_Description__c, "N/A")}}" width="40%">
</th>
<th style="text-align:left;valign:top;" svmx-data="{{$F.IF($D.Parts.SVMXC__Actual_Price2__c, $F.FORMAT("{0}", $F.LNUMBER($D.Parts.SVMXC__Actual_Price2__c,2)), "N/A")}}" width="10%">
</th>
<th style="text-align:left;valign:top;" svmx-data="{{$F.IF($D.Parts.SMAX_PS_Calculated_Line_Discount__c, $F.FORMAT("{0}", $F.LNUMBER($D.Parts.SMAX_PS_Calculated_Line_Discount__c,2)), "N/A")}}" width="10%">
</th>
<th style="text-align:right;valign:top;padding-right:5px" svmx-data="{{$F.IF($D.Parts.SMAX_PS_CalculatedLinePrice__c, $F.FORMAT("{0}", $F.LNUMBER($D.Parts.SMAX_PS_CalculatedLinePrice__c,2)), "N/A")}}" width="10%">
</th>
</tr>
</thead>
</table>

Clone an element by jQuery with refreshing the value depends on the original element when increment or decrement occur

First of all I would like you to know that before I make a post here I read a lot about this subject but still can't apply the idea so this post is after long time of searching...
This is HTML Code
<!DOCTYPE html>
<html>
<head>
<title>test₺</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container-fluid" style="margin: 0; padding: 0;">
<nav style="height: 30px; width: 100%; background-color: dodgerblue"></nav>
</div>
<div class="container">
<div class="row">
<div class="menu col-sm-6">
<div class="mealType burger">
<div class="categoryTitle">Burger</div>
<div class="categoryContent" id="burger">
<table>
<tr>
<td><img src="images/meal.png" alt=""></td>
<td>Chicken Burger</td>
<td>18<span>₺</span></td>
<td class="add">+</td>
<td>-</td>
<td>0<span>x</span></td>
<td>0<span>₺</span></td>
</tr>
<tr>
<td><img src="images/meal.png" alt=""></td>
<td>Fish Burger</td>
<td>15<span>₺</span></td>
<td class="add">+</td>
<td>-</td>
<td>0<span>x</span></td>
<td>0<span>₺</span></td>
</tr>
<tr>
<td><img src="images/meal.png" alt=""></td>
<td>Barbeque</td>
<td>12<span>₺</span></td>
<td class="add">+</td>
<td>-</td>
<td>0<span>x</span></td>
<td>0<span>₺</span></td>
</tr>
</table>
</div>
</div>
<div class="mealType seaFood">
<div class="categoryTitle">Sea Food</div>
<div class="categoryContent" id="seaFood">
<table>
<tr>
<td><img src="images/meal.png" alt=""></td>
<td>Fish Sliece</td>
<td>18<span>₺</span></td>
<td class="add">+</td>
<td>-</td>
<td>0<span>x</span></td>
<td>0<span>₺</span></td>
</tr>
<tr>
<td><img src="images/meal.png" alt=""></td>
<td>Fillet Fish</td>
<td>25<span>₺</span></td>
<td class="add">+</td>
<td>-</td>
<td class="add">0<span>x</span></td>
<td>0<span>₺</span></td>
</tr>
<tr>
<td><img src="images/meal.png" alt=""></td>
<td>Hamour Fish</td>
<td>40<span>₺</span></td>
<td class="add">+</td>
<td>-</td>
<td>0<span>x</span></td>
<td>0<span>₺</span></td>
</tr>
</table>
</div>
</div>
<div class="mealType steak">
<div class="categoryTitle">Steak</div>
<div class="categoryContent" id="seaFood">
<table>
<tr>
<td><img src="images/meal.png" alt=""></td>
<td>Chicken Steak</td>
<td>18<span>₺</span></td>
<td class="add">+</td>
<td>-</td>
<td>0<span>x</span></td>
<td>0<span>₺</span></td>
</tr>
<tr>
<td><img src="images/meal.png" alt=""></td>
<td>Beef Steak</td>
<td>25<span>₺</span></td>
<td class="add">+</td>
<td>-</td>
<td>0<span>x</span></td>
<td>0<span>₺</span></td>
</tr>
</table>
</div>
</div>
</div>
<div class="myCart col-sm-6">
<div class="myCartContaier">
<div class="myCartTitle">My Cart</div>
<div class="myCartDetails">
<table></table>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Javascript jQuery Code
'use strict';
// Start Remove the ability to select //
$(".mealType, .categoryTitle, .categoryContent, .table").attr('unselectable', 'on').css('user-select', 'none').on('selectstart', false);
// End Remove the ability to select //
$(function(){
$('.categoryTitle').on('click', function(){
var $this = $(this);
$this.next('div').slideToggle(200);
});
$('.add').on('click', function(){
var $this = $(this),
$elementToClone = $this.parent(),
$myCartDetails = $this.parent().parent().parent().parent().parent().parent().next().children().children().next().children();
if ($myCartDetails.children().hasClass('addCloned')) {
$($myCartDetails.children()).removeClass('addCLoned').detach();
} else {
$elementToClone.clone(true,true).appendTo($myCartDetails).addClass('addCloned');
}
});
});
CSS code if needed
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
.menu {
background-color: white;
width: 200px;
}
.mealType {
background-color: red;
width: 400px;
margin: 0 auto;
box-shadow: 1px 1px 10px silver;
}
.menu, .myCart {
margin-top:0rem;
padding: 10px;
}
.categoryTitle {
background-color: dodgerblue;
width: 400px;
margin: 0 auto;
margin-top: 20px;
padding: 5px;
color: white;
font-weight: bold;
font-family: Calibri, sans-serif, Tahoma, Arial;
font-size: 18px;
text-shadow: 1px 1px 2px black;
cursor: pointer;
}
.categoryContent {
display: none;
}
.categoryTitle, .myCartTitle {
text-align: center;
}
table {
margin: 0 auto;
width: 400px;
}
table tr {
border-bottom: 1px solid silver;
}
table tr:nth-child(even) {
background-color: white;
}
table tr:nth-child(odd) {
background-color: #EEE;
}
table td {
padding: 5px 10px;
text-align: center;
color: black;
font-family: Calibri, sans-serif, Tahoma, Arial;
}
td img {
width: 30px;
}
table tr td:nth-of-type(4),table tr td:nth-of-type(5) {
cursor: pointer;
}
the idea is Add to cart by javascript I tried the clone with the argument (true,true) but still I am not able to apply the idea that I want I tried a lot of things but I am really unable to apply the idea that I want so I posted in stackoverflow hopefully there's a hero will guide me to the right way to apply like this idea and I really appreciate his effort I am waiting for you guys thanks a lot.
Click To See Simple Image Of The Idea

$myCartDetails = $this.parent().parent().parent().parent().parent().parent().next().children().children().next().children();
You really need to go back and learn the fundamental concepts of javascript, html, and css before you even try to make a cart.

Column resizing in HTML table

I have two tables. One for header and other for the body. I created it this way so that header will remain fixed if the body overflows.
(function() {
var target = $("#target");
$("#source").scroll(function() {
target.prop("scrollTop", this.scrollTop)
.prop("scrollLeft", this.scrollLeft);
});
})();
.scroll-example {
display: block;
margin-right: 20px;
width: 100%;
}
td {
border: 1px solid black;
min-width: 100px;
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
td:hover i {
display: block;
float: right;
visibility: visible;
}
i {
display: none;
visibility: hidden;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="overflow: hidden;width: 400px;">
<table id="target" class="scroll-example" style="overflow: hidden;">
<tr>
<td class="col1">HHHHHHHHHHHHH</td>
<td class="col2">HHHHHHHHHHH</td>
<td class="col3">HHHHHHHHHHH</td>
<td class="col4">HHHHHHHHHHH</td>
<td class="col5">HHHHHHHHHHH</td>
<td class="col6">HHHHHHHHHHH</td>
<td class="col7" width="20px" style="border-color: white;"></td>
</tr>
</table>
<table id="source" class="scroll-example" style="overflow: scroll;height: 50px;">
<tr>
<td class="col1"><i class="fa fa-pencil"></i>AAAAAAAAAAA</td>
<td class="col2"><i class="fa fa-pencil" aria-hidden="true"></i>AAAAAAAAAAA</td>
<td class="col1"><i class="fa fa-lock" aria-hidden="true"></i>AAAAAAAAAAA</td>
<td class="col1"><i class="fa fa-pencil" aria-hidden="true"></i>AAAAAAAAAAA</td>
<td class="col1"><i class="fa fa-lock" aria-hidden="true"></i>AAAAAAAAAAA</td>
<td class="col1"><i class="fa fa-lock" aria-hidden="true"></i>AAAAAAAAAAA</td>
</tr>
</table>
</div>
Now I am looking for resizing the columns dynamically. So when the user resizes the top table column it should resize the corresponding bottom cell column.
I tried td{resize: horizontal;} but it is not working and I guess that is because of td{min-width:100px;max-width:100px;}.
Is there a way to achieve the column resizing in this table?
I am a beginner with CSS and jQuery. It would be of great help if you could put an example code. Thanks you.
Sample:
I have dragged 'Account Name' column and when I release it, the column width is set.

Ive searched a lot for my own table widget. You need 2 Tables in each of them a colgroup with col´s they have to match your table column count. Ive created a fiddle i hope it´s clear enough. The two col´s of the Tables needs to be synced on your jquery resize functionality.
.head{
width: 100%;
table-layout: fixed;
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
}
.body{
width: 100%;
table-layout: fixed;
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
}
<table class="head">
<colgroup>
<col width="100px"> <!-- Our resized column -->
<col>
<col>
</colgroup>
<tbody>
<tr>
<td>#</td>
<td>From</td>
<td>Subject</td>
</tr>
</tbody>
</table>
<table class="body">
<colgroup>
<col width="100px"> <!-- Our resized column -->
<col>
<col>
</colgroup>
<tbody>
<tr>
<td>00001</td>
<td>Mister Exmple</td>
<td>Problems with sharing</td>
</tr>
<tr>
<td>00002</td>
<td>Mister Example 02</td>
<td>Ouh is this a subject?</td>
</tr>
<tr>
<td>00003</td>
<td>Mistr Default</td>
<td>Yo whats up</td>
</tr>
</tbody>
</table>

how to give space between tr tag and divide by | in html

Hi in the below code how to give the space to two tr rows and i want to divide with this symbol.and background color should occupy the full table.first row no need this | i want to divide all the left side row with full | symbol and then right side td's
can any one help me
Expected output:
About Us | Latest News
Facilities Events
Doctors Gallery
Our Blogs Contact Us
html
<div id="slider1">
<footer>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>About Us</td>
<td>Latest News</td>
</tr>
<tr>
<td>Facilities</td>
<td>Events</td>
</tr>
<tr>
<td>Doctors</td>
<td>Gallery</td>
</tr>
<tr>
<td>Our Blogs</td>
<td>Contact Us</td>
</tr>
</table>
</footer>
</div>
css
#slider1 footer {
background-color:#00008B;
width:100%;
#footer tr {
position: relative;
list-style-type: none;
display: inline;
}
#footer tr:before {
content: " | ";
}
#footer td {
border: 1px dotted blue;
}
#footer tr.row2 td {
padding-top: 40px;
}
#footer tr:first-child:before {
content: none;
}

see this: http://jsfiddle.net/ze0587d0/
#slider1 footer {
width:100%;
}
#footer tr {
position: relative;
list-style-type: none;
display: inline;
}
#footer tr:before {
content: " | ";
}
#footer td {
border: 1px dotted blue;
}
#footer tr.row2 td {
padding-top: 40px;
}
#footer tr:first-child:before {
content: none;
}
td{
padding:5px;
}
.border-right{
border-right:1px solid #000;
}
<div id="slider1">
<footer>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td class='border-right'>About Us</td>
<td>Latest News</td>
</tr>
<tr>
<td>Facilities</td>
<td>Events</td>
</tr>
<tr>
<td>Doctors</td>
<td>Gallery</td>
</tr>
<tr>
<td>Our Blogs</td>
<td>Contact Us</td>
</tr>
</table>
</footer>
</div>
just add a class for the first td, where you want | sign, and the css border-right:1px solid #000;
Edit:
According to the comment by OP,
If you want all td's having a saperation with |, see this: http://jsfiddle.net/ze0587d0/2/
you need to add a border-right to all tds which are first-child of tr,
tr td:first-child{
border-right:1px solid #000;
}
#slider1 footer {
width:100%;
}
#footer tr {
position: relative;
list-style-type: none;
display: inline;
}
#footer tr:before {
content: " | ";
}
#footer td {
border: 1px dotted blue;
}
#footer tr.row2 td {
padding-top: 40px;
}
#footer tr:first-child:before {
content: none;
}
tr td:first-child{
border-right:1px solid #000;
}
td{
padding:5px;
}
<div id="slider1">
<footer>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td >About Us</td>
<td>Latest News</td>
</tr>
<tr>
<td>Facilities</td>
<td>Events</td>
</tr>
<tr>
<td>Doctors</td>
<td>Gallery</td>
</tr>
<tr>
<td>Our Blogs</td>
<td>Contact Us</td>
</tr>
</table>
</footer>
</div>

I think this is what you are after...it uses your pseudo-element but positions it absolutely.
#slider1 footer {
background-color: #00008B;
width: 100%;
color: white;
}
#slider1 table {
table-layout: fixed;
}
#slider1 footer tr td {
padding: 0 1rem;
position: relative;
}
#slider1 footer tr:first-of-type td:first-child:after {
position: absolute;
right: 0;
content: "|";
}
<div id="slider1">
<footer>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>About Us</td>
<td>Latest News</td>
</tr>
<tr>
<td>Facilities</td>
<td>Events</td>
</tr>
<tr>
<td>Doctors</td>
<td>Gallery</td>
</tr>
<tr>
<td>Our Blogs</td>
<td>Contact Us</td>
</tr>
</table>
</footer>
</div>

jQuery fadeToggle causes table border to appear

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.