We Keep Coding

HTML/CSS/JS: Fix thead when scroll-y

How can I fix the complete thead when scrolling in Y-Direction?
It's important to note that the table width is greater than the wrapping div. So scrolling in X-Direction should also scroll the thead - so separating thead from table is not an option I guess.
Please see this fiddle
HTML
<div>
<table>
<thead>
<tr>
<th>
One
</th>
<th>
Two
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
DataOne
</td>
<td>
DatTwo
</td>
</tr>
<tr>
<td>
DataOne
</td>
<td>
DatTwo
</td>
</tr>
<tr>
<td>
DataOne
</td>
<td>
DatTwo
</td>
</tr>
<tr>
<td>
DataOne
</td>
<td>
DatTwo
</td>
</tr>
</tbody>
</table>
</div>
CSS
div {
width:80px;
height:100px;
}
table {
height:100px;
display:block;
overflow:auto;
}

A solution would be to assign a function to the scroll event handler using javascript. Use a second table, and if table1 isn't scrolled downwards, have table 2 hidden. When table1 is scrolled downwards call .show() on table2's .
Note: you will need to include JQuery in your HTML.
HTML
<table id="table-1">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
</tbody>
CSS
body { height: 1000px; }
#header-fixed {
position: fixed;
top: 0px; display:none;
background-color:white;
}
Javascript/JQuery
var tableOffset = $("#table-1").offset().top;
var $header = $("#table-1 > thead").clone();
var $fixedHeader = $("#header-fixed").append($header);
$(window).bind("scroll", function() {
var offset = $(this).scrollTop();
if (offset >= tableOffset && $fixedHeader.is(":hidden")) {
$fixedHeader.show();
}
else if (offset < tableOffset) {
$fixedHeader.hide();
}
});
Fiddle:
http://jsfiddle.net/py8b0s7v/

th{
position: sticky;
top: 0;
background-color:white;
}
Hi,
Add above Css.
Set position as sticky instead of fixed.
Fixed will "fix" the component to the top of the screen no matter where it is on the page. Sticky uses JS to calculate where it is on the page and only fix to the top when the viewport reaches it. Simply put, use sticky if you want content above the component.

This solved it for me:
document.getElementById("TableHead").addEventListener("scroll", function(){
var translate = "translate(0,"+this.scrollTop+"px)";
this.querySelector("thead").style.transform = translate;
});
Fiddle: https://jsfiddle.net/pxtokb4g/97/

hiding/showing a table row breaks layout

I'm trying to hide and show table rows, the following works but breaks the layout , ie the empty <td> s lose their width is there a way to prevent this?
$(document).on("click ", "tr.grey", function(e) {
e.preventDefault();
$( "tr.sales-details" ).removeClass( "show" );
$(this).nextUntil(".grey").addClass( "show" );
});
tbody tr.sales-details, tbody tr.sales-details-title{
display: none;
&.show{
display: block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="100%" class="modal-table" id="modal-table">
<thead>
<tr><th>Surgeon name</th>
<th>Country</th>
<th>Antiquity</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr class="grey">
<td>Alex Lloyd</td>
<td>Spain</td>
<td>new client</td>
<td>2690.58 USD</td>
</tr>
<tr class="sales-details-title">
<td></td>
<td></td>
<td><strong>Seller:</strong></td>
<td><strong>Percentage:</strong></td>
</tr>
<tr class="sales-details">
<td></td>
<td></td>
<td>Support</td>
<td>2690.58 USD</td>
</tr>
</tbody>
</table>

try using {visibility:hidden} and {visibility:visible} to hide or display the elements - this will haide content but keep its place in the DOM and not cause reflowing / reformatting that disply:none causes.
tbody tr.sales-details, tbody tr.sales-details-title{
visibility: hidden;
&.show{
visibility:visible;
}
}

Use 'view more' button to enhance information on each table row

I have a pretty simple html table, there are lots of information i want to add for each row but i cant display everything when the page is loaded because it is going to make everything very clumsy. So i want to add a view more button in another column for each of the row.
I have already tried writing a JavaScript code but its not working as i want. What i want is:
The row should be completely invisible until i click the view more (i tried putting the tags inside the div but it messed everything up by putting the row outside the table entirely).
I want the code to work for all the rows so i don't have to write separate codes for each row.
I want the extended information for a row to be invisible whenever i try to view more for another row.
If possible, i would like a simple animation for showing the extended animation.
Below is my HTML code:
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Action</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>View More</td>
</tr>
<tr>
<td colspan="3">
<div id="example" class="more">
<p>John Doe is a man</p>
<p style="text-align:right;">Hide this content.</p>
</div>
</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
<td>View More</td>
</tr>
<tr>
<td colspan="3">
<div id="example" class="more">
<p>Jane Doe is a woman</p>
<p style="text-align:right;">Hide this content.</p>
</div>
</td>
</tr>
</table>
Below is my CSS:
<style type="text/css">
.more {
display: none;
}
a.showLink, a.hideLink {
text-decoration: none;
color: #36f;
padding-left: 8px;
background: transparent url(down.gif) no-repeat left;
}
a.hideLink {
background: transparent url(up.gif) no-repeat left;
}
a.showLink:hover, a.hideLink:hover {
border-bottom: 1px dotted #36f;
}
</style>
Below is my Javascript:
<script language="javascript" type="text/javascript">
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID+'-show').style.display != 'none') {
document.getElementById(shID+'-show').style.display = 'none';
document.getElementById(shID).style.display = 'block';
}
else {
document.getElementById(shID+'-show').style.display = 'inline';
document.getElementById(shID).style.display = 'none';
}
}
}
</script>

Since you tagged jQuery, I'm assuming you're willing to use it, so here's an example of a fix with jQuery:
EDIT: The html has changed, the second row failed to work due to the ID selector
HTML
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Action</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>View More</td>
</tr>
<tr>
<td colspan="3">
<div id="example" class="more">
<p>John Doe is a man</p>
<p style="text-align:right;">Hide this content.</p>
</div>
</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
<td>View More</td><!-- Note the change in the showHide() function -->
</tr>
<tr>
<td colspan="3">
<div id="exampleFemale" class="more"><!-- Note the change in the ID -->
<p>Jane Doe is a woman</p>
<p style="text-align:right;">Hide this content.</p><!-- Note the change in the showHide() function -->
</div>
</td>
</tr>
</table>
Javascript
function showHide(shID) {
if ($('#' + shID)) {
if ($('#' + shID+'-show').css('display') != 'none') {
$('#' + shID+'-show').css({'display':'none'});
$('#' + shID).css({'display':'block'});
}
}
else {
$('#' + shID+'-show').css({'display':'inline'});
$('#' + shID).css({'display':'none'});
}
}
Note the changes inthe Javascript -> jQuery where there used to be document.getElementById(shID+'-show') is now $('#' + shID+'-show') and where there used to be .style.display = 'none'; is now .css({'display':'none'});
Don't forget to include jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Hope this helps!

Javascript <tbody> swapping not working

I've got a couple tables whose content should change based on clicking certain buttons (in this case, links). I've used this Javascript code elsewhere successfully, though with only one parameter in the switchid() function (there was only one table to mess around with). I keep researching examples of this and I seem to be passing the variables correctly, so what am I doing wrong? This code doesn't work on Chrome or IE:
Edit: Per the comments, I was able to whittle my javascript section down to a single, smaller function, that should do the same thing. I have made the change below. It still doesn't work, though.
I also changed my "array" and "x" variables to "JonArray" and "JonX" to avoid any chances of one of those being a reserved word.
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
var topTable = new Array('English','Spanish');
var bottomTable = new Array('Japanese','Italian');
function switchid(JonArray,JonX) {
for(var i=0;i<JonArray.length();i++) {
document.getElementById(JonX).style.display='none';
}
document.getElementById(JonX).style.display='table-row-group';
}
</script>
<table border='1'>
<thead>
<tr><td>Odds</td><td>Evens</td></tr>
</thead>
<tfoot>
<tr><td>English</td><td>Spanish</td></tr>
</tfoot>
<tbody id='English'>
<tr><td>One</td><td>Two</td></tr>
<tr><td>Three</td><td>Four</td></tr>
</tbody>
<tbody id='Spanish' style="display:none;">
<tr><td>Uno</td><td>Dos</td></tr>
<tr><td>Tres</td><td>Quatro</td></tr>
</tbody>
</table>
<br />
<table border='1'>
<thead>
<tr><td>Odds</td><td>Evens</td></tr>
</thead>
<tfoot>
<tr><td>Japanese</td><td>Italian</td></tr>
</tfoot>
<tbody id='Japanese'>
<tr><td>Ichi</td><td>Ni</td></tr>
<tr><td>San</td><td>Shi</td></tr>
</tbody>
<tbody id='Italian' style="display:none;">
<tr><td>Un</td><td>Due</td></tr>
<tr><td>Tre</td><td>Quattro</td></tr>
</tbody>
</table>
</body>
</html>

http://jsfiddle.net/92ZPM/1/
I made sure the function and variables were available regardless of when they are created.
I also gave your variables descriptive names, cleaned up and stored the table data in a single object.
JavaScript
window.switchid = function (table, language) {
var tables = {
'top': ['English', 'Spanish'],
'bottom': ['Japanese', 'Italian']
};
for (var i = 0; i < tables[table].length; i++) {
document.getElementById(tables[table][i]).style.display = 'none';
}
document.getElementById(language).style.display =
'table-row-group';
}
HTML
<table border='1'>
<thead>
<tr>
<td>Odds</td>
<td>Evens</td>
</tr>
</thead>
<tfoot>
<tr>
<td>English
</td>
<td>Spanish
</td>
</tr>
</tfoot>
<tbody id='English'>
<tr>
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
</tbody>
<tbody id='Spanish' style="display:none;">
<tr>
<td>Uno</td>
<td>Dos</td>
</tr>
<tr>
<td>Tres</td>
<td>Quatro</td>
</tr>
</tbody>
</table>
<br />
<table border='1'>
<thead>
<tr>
<td>Odds</td>
<td>Evens</td>
</tr>
</thead>
<tfoot>
<tr>
<td>Japanese
</td>
<td>Italian
</td>
</tr>
</tfoot>
<tbody id='Japanese'>
<tr>
<td>Ichi</td>
<td>Ni</td>
</tr>
<tr>
<td>San</td>
<td>Shi</td>
</tr>
</tbody>
<tbody id='Italian' style="display:none;">
<tr>
<td>Un</td>
<td>Due</td>
</tr>
<tr>
<td>Tre</td>
<td>Quattro</td>
</tr>
</tbody>
</table>

you have to change your javascript a little:
var tables=new Array();
tables['topTable'] = new Array('English','Spanish');
tables['bottomTable'] = new Array('Japanese','Italian');
function switchid(JonArray,JonX) {
//alert(JonArray);
var tmptable=tables[JonArray];
for(var i=0;i < tmptable.length;i++) {
document.getElementById(tmptable[i]).style.display='none';
}
document.getElementById(JonX).style.display='';
}

Some of these answers work, but I just caught the REAL answer via Chrome DevTools! In my 'for' loop I was using 'length()' instead of 'length'!!!

Why not to use CSS instead of looping through IDs?
JSFiddle
HTML
<table border='1' class="English">
<thead>
<tr><td>Odds</td><td>Evens</td></tr>
</thead>
<tfoot>
<tr><td onclick="changeLang(this,'English')">English</td><td onclick="changeLang(this,'Spanish')">Spanish</td></tr>
</tfoot>
<tbody id='English'>
<tr><td>One</td><td>Two</td></tr>
<tr><td>Three</td><td>Four</td></tr>
</tbody>
<tbody id='Spanish'>
<tr><td>Uno</td><td>Dos</td></tr>
<tr><td>Tres</td><td>Quatro</td></tr>
</tbody>
</table>
CSS
tbody {
display: none;
}
.English #English, .Spanish #Spanish, .Japanese #Japanese, .Italian #Italian {
display: table-row-group;
}
JS
function changeLang(cell, lang) {
cell.parentNode.parentNode.parentNode.className = lang;
}

Setting class on HR breaks TD colspan

I have a nested table arrangement for displaying data. I want the nested table to be in a TD that spans all the parent table columns. So I have colspan set. However I also want the user to be able to click on the parent to hide/unhide the child data. This works fine in IE8, but in FireFox and Chrome the nested table is ignoring the colspan and is only sown in the first column.
The code below is an example of the problem. If you click the first column text you'll see what I mean. The final row of data isn't classed so it shows ok on page load, but once the class is set it goes wrong again.
Any thoughts?
Thanks.
<!DOCTYPE html PUBLIC "-//W3C//thD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/thD/xhtml1-transitional.thd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<script type="text/javascript">
function expandRow(rowID, clickRow)
{
var item = document.getElementById(rowID);
if(item.className=='hidden'){
item.className = 'unhidden';
}else{
item.className = 'hidden';
}
}
</script>
<style type="text/css">
.hidden { display: none; }
.unhidden { display: block; }
</style>
<title>Table Test</title>
</head>
<body>
<table>
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col4</th>
</tr>
</thead>
<tbody>
<tr>
<td class="collapsed" onclick="expandRow('id30', this);">Click Here to Expand</td>
<td>data1</td>
<td>data2</td>
<td>data3</td>
</tr>
<tr class="hidden" id="id30">
<td colspan="4">
<table>
<tbody>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="collapsed" onclick="expandRow('id95', this);">Click Here to Expand</td>
<td>data1</td>
<td>data2</td>
<td>data3</td>
</tr>
<tr class="hidden" id="id95">
<td colspan="4">
<table>
<tbody>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="collapsed" onclick="expandRow('id96', this);">Click Here to Expand</td>
<td>This one</td>
<td>displays ok</td>
<td>until you set the class!</td>
</tr>
<tr id="id96">
<td colspan="4">
<table>
<tbody>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>

Get rid of your unhidden class entirely - it's completely redundant. Instead just remove the hidden class from the element to allow it to return to it's natural state, in this case:
item.className = '';
But normally I would recommend a replacement:
item.className = item.className.replace(/\bhidden\b/gi,'');
(and fwiw, personally I find "removed" more semantically correct than "hidden" which I would reserve for dealing with the visibility property)

change the css line about unhidden to: .unhidden { display: table-row; }
block is an invalid style for trs.

I solved it, using this info by just declaring
.vis {
display: block;
display: table-row;
}
Old Internet Explorers ignores the table-row. Firefox and Internet Explorer 8 use it.

only change this part of CSS
<style type="text/css">
.hidden { display: none; }
.unhidden { display:; }
</style>

Why don't you just remove the styling altogether:
<style type="text/css">
.hidden { display: none; }
.unhidden { }
</style>