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>

How to highlight multiple rows when hovering over one row

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.

Column and row highlighting not working with classes

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>

html table cells with no border

I want to create a html table as below.
I tried everything like frame="hsides" rules="groups" etc.
Nothing seems to work. Any thoughts on this please?
UPDATE: Here is the code. I need less space between the columns and no line on the tbody.
<table class="grouped-columns-table" cellpadding="10" cellspacing="0">
<thead>
<tr>
<th>Col A1</th>
<th class=""></th><!-- SPACER -->
<th>Col A2</th>
<th class=""></th><!-- SPACER -->
<th>Col B1</th>
</tr>
</thead>
<tbody class="tb">
<tr>
<td>A1</td>
<td class="content-group-spacer"></td><!-- SPACER -->
<td>A2</td>
<td class="content-group-spacer"></td><!-- SPACER -->
<td>B1</td>
</tr>
<tr>
<td>A1</td>
<td class="content-group-spacer"></td><!-- SPACER -->
<td>A2</td>
<td class="content-group-spacer"></td><!-- SPACER -->
<td>B1</td>
</tr>
<tr>
<td>A1</td>
<td class="content-group-spacer"></td><!-- SPACER -->
<td>A2</td>
<td class="content-group-spacer"></td><!-- SPACER -->
<td>B1</td>
</tr>
</tbody>
</table>
.grouped-columns-table {
border-collapse: collapse;
}
.content-group {
border: 0;
}
.content-group-spacer {
width: 1px;
}
.grouped-columns-table td:not(.content-group-spacer) {
border: 0px solid #ccc;
border-collapse: collapse;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-top: 0px solid #ccc;
border-bottom: 0px solid #ccc;
}
tbody {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}

You are massively over complicating this. Get rid of the presentational HTML (including the data cells with no data in them).
You just need to set border-spacing so you have space between your cells where you want them, and then set borders around the edges of the cells you want borders on.
.grouped-columns-table {
border-collapse: seperate;
border-spacing: 10px 0;
}
.grouped-columns-table tbody tr > * {
border-left: solid black 1px;
border-right: solid black 1px;
}
.grouped-columns-table tbody tr:first-child td {
border-top: solid black 1px;
}
.grouped-columns-table tbody tr:last-child td {
border-bottom: solid black 1px;
}
<table class="grouped-columns-table">
<thead>
<tr>
<th>Col A1</th>
<th>Col A2</th>
<th>Col B1</th>
</tr>
</thead>
<tbody class="tb">
<tr>
<td>A1</td>
<td>A2</td>
<td>B1</td>
</tr>
<tr>
<td>A1</td>
<td>A2</td>
<td>B1</td>
</tr>
<tr>
<td>A1</td>
<td>A2</td>
<td>B1</td>
</tr>
</tbody>
</table>

You can do it using first-child and last-child selectors, see fiddle: https://jsfiddle.net/snpsp6as/1/
.tb > tr:last-child > td{border-bottom: 1px solid #ccc;}
.tb > tr:last-child > .content-group-spacer{border-bottom: none !important;}
.tb > tr:first-child > td{border-top: 1px solid #ccc;}
.tb > tr:first-child > .content-group-spacer{border-top: none !important;}

HTML table headers to be fixed without scrolling

Please suggest how can i lock the headers in the table not to scroll. Find the sample code : http://jsfiddle.net/7t9qkLc0/14/ .
I want to lock Column1 and Column2 header so that when we scroll down to view the data the table headers are still visible.Thanks in advance.
My html code:
<div id="test" style="float: left; border: 0px solid #99ffff;">
<table cellpadding="2px" cellspacing="2px" style="border: 0px solid #ffffff; margin-right: 15px; margin-bottom: 20px;">
<tr>
<td>
<table cellpadding="2px" cellspacing="2px" style="border: 2px solid #657383; margin-bottom: 15px;" width="300px">
<tr>
<td colspan="3" style="padding-left: 0px; padding-right: 0px; padding-bottom: 0px">
<table width="300px" border="1" class="newTable">
<tr>
<th>Column1</th>
<th>Column2</th>
</tr>
<tr><td class="rowStyle">data 1</td>
<td class="rowStyle">data1 </td></tr>
<tr><td class="rowStyle">data 2</td>
<td class="rowStyle">data2</td></tr>
<tr><td class="rowStyle">data 3</td>
<td class="rowStyle">data3</td></tr>
<tr><td class="rowStyle">data 1</td>
<td class="rowStyle">data1 </td></tr>
<tr><td class="rowStyle">data 2</td>
<td class="rowStyle">data2</td></tr>
<tr><td class="rowStyle">data 1</td>
<td class="rowStyle">data1 </td></tr>
<tr><td class="rowStyle">data 2</td>
<td class="rowStyle">data2</td></tr>
<tr><td class="rowStyle">data 3</td>
<td class="rowStyle">data3</td></tr>
<tr><td class="rowStyle">data 3</td>
<td class="rowStyle">data3</td></tr>
</table></td></tr>
</table>
</td>
</tr>
</table>
</div>

You have to put your header in a seperate table and put a fixed position on it. Take a look at this.
http://jsfiddle.net/7t9qkLc0/47/
<table width="290px" border="1" class="newTable">
<tr>
<th>Column1</th>
<th>Column2</th>
</tr>
</table>
<table style="margin-top:25px">
<tr> ....

Try it like this:
Changed this in the HTML:
<th>Column1
<div>Column111</div>
</th>
<th>Column2
<div>Column222</div>
</th>
(The divs are new)
And add this CSS:
th {
height: 0;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
color: transparent;
border: none;
white-space: nowrap;
}
th div{
position: absolute;
background: blue;
color: #fff;
padding: 9px 25px;
top: 0;
line-height: normal;
border-left: 1px solid #800;
}
NOTE: The css is a little bit rough, but with a little bit styling it will look better
FIDDLE
Another way is to separate the headerline from the table and make them 2 elements.

you could assign the position:fixed; attribute to the th style and then style it to fit in with the table so positioning and overlapping is correct.
th {
position: fixed;
}
I also just found this link that answers your question http://jsfiddle.net/T9Bhm/7/