We Keep Coding

Change JavaScript code to only expand next row, not all next rows in table

I'm very new to this and trying to work out how something works that someone previous to me has implemented and I need to alter.
We have a table with say 3 or 4 headers and at present one row below it.
JavaScript is used so that upon clicking on a row, it expand to display the next row.
What I'm trying to do is have another table within one of the rows that only shows after expanding.
$(document).ready(function(){
$("#report66 tr:odd").addClass("odd");
$("#report66 tr:not(.odd)").hide();
$("#report66 tr:first-child").show();
$("#report66 tr.odd").click(function(){
$(this).next("tr").toggle();
$(this).find(".arrow").toggleClass("up");
});
});
.table.tableSection {
display: table;
width: 500%;
}
.table.tableSection thead, table.tableSection tbody {
float: left;
width: 100%;
}
.table.tableSection tbody {
overflow: auto;
height: 250px;
}
.table.tableSection tr {
width: 100%;
display: table;
text-align: left;
}
.table.tableSection th, table.tableSection td {
width: 33%;
}
.td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 5px;
background-color: #00565c;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<table id='report66'>
<tr>
<th>Header1</th>
<th>Header2</th>
<th>Header3</th>
<th>Header4</th>
</tr>
<tr>
<td>Data1</td>
<td>Data2</td>
<td>Data3</td>
<td>Data4</td>
<tr>
<td colspan='8'>
Information
Information
<table>
<th>Test</th>
<tr>
<td>Test</td>
</table>
</table>
So with this you can see that upon selecting the first row of data it expands and shows the next row. The table within that row, is collapsed and you have to expand this.
Main question is, how can I change this so that the 2nd table is not collapsed? (I'm not bothered about collapsing it)
There are a lot of different methods of achieving this but every single one I find, doesn't seem to fit what I need.
EDIT WITH ORIGINAL CODE SNIPPET
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#report66 tr.information-row').hide();
$("#report66 tr:not(.information-row)").click(function(){
$('#report66 tr.information-row').toggle();
});
});
</script>
<style>
.new table {
table-layout: fixed;
width: 100% ;
}
</style>
<?php
if($replacementpending >= 1)
{
echo "<h4><center><b>Network | Pending Acceptance</b></center></h4>";
$sql = "SELECT * FROM `stock`.`replacements.joblog` WHERE `status` = 'Pending' AND `ownership` = 'Stock' ORDER BY `id` ASC";
$retval = mysqli_query( $conn, $sql );
if(! $retval ) {
die('Could not get data: ' . mysqli_error());
}
echo
"<table border='1'>
<table id='report66'>
<tr>
<th style='background-color:#003033'>DB Ref</th>
<th style='background-color:#003033'>Ticket Ref</th>
<th style='background-color:#003033'>Item Requested</th>
<th style='background-color:#003033'>Customer</th>
<th style='background-color:#003033'><center><span class='glyphicon glyphicon-circle-arrow-down'></span></center></th>
</tr>";
while($row = mysqli_fetch_array($retval)) {
echo "<tr>";
echo
"<td>{$row['id']}</td>".
"<td>{$row['req_ticketref']}</td>".
"<td>{$row['req_model']}</td>".
"<td>{$row['req_customer']}</td>".
"<td style='table-layout: fixed; width: 3%'><center><span class='glyphicon glyphicon-circle-arrow-down'></span></center></td>";
}
echo
"
<tr class='information-row' style='background-color:#00181a'>
<td colspan='8' style='background-color:#00181a'>
";
echo "
<center><h4><b>Additional information</b></h4>
<table style='table-layout: fixed; width: 70%'>
<th style='background-color:#003033;text-align:right'>CI Name</th><td>{$row['ciref']}</td><tr>
<th style='background-color:#003033;text-align:right'>Requested By</th><td>{$row['req_name']}</td><tr>
<th style='background-color:#003033;text-align:right'>Ticket Reference</th><td>{$row['req_ticketref']}</td><tr>
<th style='background-color:#003033;text-align:right'>Customer</th><td>{$row['req_customer']}</td><tr>
<th style='background-color:#003033;text-align:right'>Date/Time Logged</th><td>{$row['datetimelogged']}</td><tr>
</table>
<br>
<legend></legend>
<h4><b>Delivery Details</b></h4>
<table style='table-layout: fixed; width: 70%'>
<th style='background-color:#003033;text-align:right'>End User Company Name</th><td>{$row['endusername']}</td><tr>
<th style='background-color:#003033;text-align:right'>Address Line 1</th><td>{$row['address1']}</td><tr>
<th style='background-color:#003033;text-align:right'>Address Line 2</th><td>{$row['address2']}</td><tr>
<th style='background-color:#003033;text-align:right'>City</th><td>{$row['city']}</td><tr>
<th style='background-color:#003033;text-align:right'>Post Code</th><td>{$row['postcode']}</td><tr>
<th style='background-color:#003033;text-align:right'>Country</th><td>{$row['country']}</td><tr>
</table>
<br>
</center>
</td>
</tr>
";
}
echo "</table>";
}
?>

When you do $("#report66 tr:not(.odd)").hide(); you actually hide all tr elements inside the main table, which do not have the .odd class name. Since you have another table inside the main one, this rule applies to the tr elements in it.
You can explicitly show all rows in the inner table:
$(document).ready(function(){
$("#report66 tr:odd").addClass("odd");
$("#report66 tr:not(.odd)").hide();
$("#report66 tr:first-child").show();
$("#report66 tr table tr").show(); // Show all inner table rows
$("#report66 tr.odd").click(function(){
$(this).next("tr").toggle();
$(this).find(".arrow").toggleClass("up");
});
});
.table.tableSection {
display: table;
width: 500%;
}
.table.tableSection thead, table.tableSection tbody {
float: left;
width: 100%;
}
.table.tableSection tbody {
overflow: auto;
height: 250px;
}
.table.tableSection tr {
width: 100%;
display: table;
text-align: left;
}
.table.tableSection th, table.tableSection td {
width: 33%;
}
.td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 5px;
background-color: #00565c;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<table id='report66'>
<tr>
<th>Header1</th>
<th>Header2</th>
<th>Header3</th>
<th>Header4</th>
</tr>
<tr>
<td>Data1</td>
<td>Data2</td>
<td>Data3</td>
<td>Data4</td>
<tr>
<td colspan='8'>
Information
Information
<table>
<th>Test</th>
<tr>
<td>Test</td>
</table>
</table>
EDIT
If you want to have multiple visible cells, which toggle the visibility of the information row right after the row they are in, the script can be simplified and you can add a specific class to that row:
$(document).ready(function () {
$('#report66 tr.information-row').hide();
$("#report66 tr:not(.information-row)").click(function () {
$(this).next().toggle();
});
});
.table.tableSection {
display: table;
width: 500%;
}
.table.tableSection thead, table.tableSection tbody {
float: left;
width: 100%;
}
.table.tableSection tbody {
overflow: auto;
height: 250px;
}
.table.tableSection tr {
width: 100%;
display: table;
text-align: left;
}
.table.tableSection th, table.tableSection td {
width: 33%;
}
.td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 5px;
background-color: #00565c;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<table id='report66'>
<tr>
<th>Header1</th>
<th>Header2</th>
<th>Header3</th>
<th>Header4</th>
</tr>
<tr>
<td>Data1</td>
<td>Data2</td>
<td>Data3</td>
<td>Data4</td>
</tr>
<tr class="information-row">
<td colspan="8">
Information
Information
<table>
<th>Test</th>
<tr>
<td>Test</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Data5</td>
<td>Data6</td>
<td>Data7</td>
<td>Data8</td>
</tr>
<tr class="information-row">
<td colspan="8">
Information 2
Information 2
<table>
<th>Test</th>
<tr>
<td>Test</td>
</tr>
</table>
</td>
</tr>
</table>

Position table with scrollbar to fill the page

I am using the jquery library to create a custom scrollbar - https://codepen.io/dragospaulpop/pen/asBcI
I created a simply example but the critical needed is to make the table fill to the rest of the page (without activating the standard browser scrollbar).
My code is:
<head>
<meta charset="UTF-8">
<title>CSS Only Fixed Table Headers</title>
<link rel='stylesheet' href='https://rawgit.com/dragospaulpop/cdnjs/master/ajax/libs/jQuery.custom.content.scroller/3.1.11/jquery.mCustomScrollbar.css'>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://rawgit.com/dragospaulpop/cdnjs/master/ajax/libs/jQuery.custom.content.scroller/3.1.11/jquery.mCustomScrollbar.concat.min.js'></script>
</head>
<body>
<div style="width:100%;height:300px;background:red"></div>
<table class="fixed_headers">
<thead>
<tr>
<th>Name</th><th>Color</th><th>Description</th>
</tr>
</thead>
<tbody id="myBody">
</tbody>
</table>
<script>
$(window).load(function(){
$("#myBody").append(" <tr> <td>Apple</td><td>Red</td><td>These are red.</td> </tr> <tr> <td>Pear</td><td>Green</td><td>These are green.</td> </tr> <tr> <td>Grape</td><td>Purple / Green</td><td>These are purple and green.</td> </tr> <tr> <td>Orange</td><td>Orange</td><td>These are orange.</td> </tr> <tr> <td>Banana</td><td>Yellow</td><td>These are yellow.</td> </tr> <tr> <td>Kiwi</td><td>Green</td><td>These are green.</td> </tr> <tr> <td>Plum</td><td>Purple</td><td>These are Purple</td> </tr> <tr> <td>Watermelon</td><td>Red</td><td>These are red.</td> </tr> <tr> <td>Tomato</td><td>Red</td><td>These are red.</td> </tr> <tr> <td>Cherry</td><td>Red</td><td>These are red.</td> </tr> <tr> <td>Cantelope</td><td>Orange</td><td>These are orange inside.</td> </tr> <tr> <td>Honeydew</td><td>Green</td><td>These are green inside.</td> </tr> <tr> <td>Papaya</td><td>Green</td><td>These are green.</td></tr><tr><td>Raspberry</td><td>Red</td><td>These are red.</td></tr><tr><td>Blueberry</td><td>Blue</td><td>These are blue.</td></tr><tr><td>Mango</td><td>Orange</td><td>These are orange.</td></tr><tr><td>Passion Fruit</td><td>Green</td><td>These are green.</td></tr>");
$("tbody").mCustomScrollbar({
theme:"light-3",
scrollButtons:{
enable:false
},
mouseWheel:{ preventDefault: true },
scrollbarPosition: 'inside',
autoExpandScrollbar:true,
theme: 'dark'
});
});
</script>
<style>
tbody {
height: 150px;
overflow: hidden;
/*replace with auto to use default scroll*/
/*overflow: auto;*/
}
.fixed_headers {
table-layout: fixed;
border-collapse: collapse;
display: block;
width: 100%;
}
.fixed_headers th {
text-decoration: underline;
}
.fixed_headers th,
.fixed_headers td {
padding: 5px;
text-align: left;
box-sizing: border-box;
display: inline-block;
width: 33.33%;
}
.fixed_headers tr {
display: block;
width: 100%;
}
.fixed_headers thead {
background-color: #333;
color: #FDFDFD;
display: block;
width: 100%;
}
.fixed_headers tbody {
display: block;
width: 100%;
}
.fixed_headers tbody tr:nth-child(even) {
background-color: #DDD;
}
</style>
</body>
I want to make the table's height: page_height-red_div_height (the size of page could be changed so it could be as percent). So the perfect solution is that red_div has always the same height but the height of the table is not const (could change by the windows size).
I tried to change the css by removing height: 150px; from the tbody and put there height: 100%; but the result was wrong - the standard browser scrollbar was activated instead of the custom scrollbar. Then I tried to change css of .fixed_headers tbody but it does not work as well.
How is it possible to solve this issue?

CSS/HTML fixed position element resizing when browser resizing

This is my situation: I have a table with table header position: fixed and a couple of table body rows with their width set to 100%.
I am trying to make the header row resize properly when browser resizes, so its cells lines up body row cells.
How am I going to achieve that? (trying to make a position: fixed element react to browser size-change dynamically)
Here is my code. A very simple webpage
<html>
<head>
<style>
body{
width:100%;
}
thead{
position:fixed;
width:100%
overflow:visible;
align:center;
}
th{
border:2px solid black;
width:20%;
text-align:center;
}
td{
border:2px solid black;
width:20%;
text-align:center;
}
table{
width:80%;
margin:auto;
margin-top:50px;
}
.empty{
height:30px;
}
.empty td{
border:none;
}
</style>
</head>
<body>
<table>
<thead>
<th>
heading1;
</th>
<th>
heading2;
</th>
<th>
heading3;
</th>
<th>
heading4;
</th>
<th>
heading5;
</th>
<thead>
<tbody>
<tr class="empty">
<td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td>
cell1;
</td>
<td>
cell2;
</td>
<td>
cell3;
</td>
<td>
cell4;
</td>
<td>
cell5;
</td>
</tr>
<tr>
<td>
cell1;
</td>
<td>
cell2;
</td>
<td>
cell3;
</td>
<td>
cell4;
</td>
<td>
cell5;
</td>
</tr>
<tbody>
</table>
</body>
</html>
I'm developing a website tool using ASP.net currently. Any solution in ASP.net will be much appreciated.

The table element is not quite flexible as other in the html. Aparently the 'position:fixed' property will make the table ignore the width specification.
Therefore I tweaked your html and css a bit, in order to better divide the document's parts into header and content (section).
Basically, the header will contain only the table head.
The section will contain all the table rows and data in it. When scrolling, the header element will remain fixed and the table head cells in it (which has been given the exact same css attributes as the td cells) will remain perfectly aligned with their respective columns.
Hope this helps, good luck.
body {
width: 100%;
margin: 0px;
}
header {
width: 100%;
position: fixed;
margin-top: -30px;
}
section {
width: 100%;
margin-top: 50px;
}
table {
width: 80%;
margin: 0px auto;
}
header table th,
section table td {
width: 20%;
text-align: center;
border: 2px solid black;
}
<header>
<table>
<thead>
<th>heading1;</th>
<th>heading2;</th>
<th>heading3;</th>
<th>heading4;</th>
<th>heading5;</th>
</thead>
</table>
</header>
<section>
<table>
<tbody>
<tr>
<td>cell1;</td>
<td>cell2;</td>
<td>cell3;</td>
<td>cell4;</td>
<td>cell5;</td>
</tr>
<tr>
<td>cell1;</td>
<td>cell2;</td>
<td>cell3;</td>
<td>cell4;</td>
<td>cell5;</td>
</tr>
</tbody>
</table>
</section>

Get image to overlay on top of table

I have a table of basketball stats and I have an image of a basketball court that will later contain a shot chart. It is initially hidden. I want the image to only appear when the user clicks a button. And the image should appear on top of the of table. (Most of the table will be behind the image)
I can't seem to manipulate the CSS or Jquery position to allow that to happen. Part of the problem is that I want the table itself to be centered (margin: 0px auto;)
I started a JSFiddle here: https://jsfiddle.net/Thread7/f7g9dtxt/ to work it out. If you click "Show Court" you will see what happens now. The image is at the bottom and to the left. Instead of the top and middle.
Code Below:
<button id='showimg'>
Show Court
</button>
<table class='mytable'>
<tr><th>Name</th><th>FGA</th><th>FGM</th><th>Rebounds</th><th>Fouls</th> </tr>
<tr><td>Michael Jordan</td><td>5</td><td>10</td><td>12</td><td>3</td></tr>
<tr><td>LeBron James</td><td>3</td><td>7</td><td>5</td><td>4</td></tr>
<tr><td>Kobe Bryant</td><td>1</td><td>8</td><td>7</td><td>3</td></tr>
<tr><td>Magic Johnson</td><td>6</td><td>11</td><td>3</td><td>3</td></tr>
<tr><td>Draymond Green</td><td>6</td><td>11</td><td>3</td><td>3</td></tr>
<tr><td>Zach Randolph</td><td>6</td><td>11</td><td>3</td><td>3</td></tr>
</table>
<img src='http://exchangedownloads.smarttech.com/public/content/2c/2c4cb6ee-579f-4404-b573-c554ba6bf7f4/previews/medium/0001.png' class='myimg' id='court'>
CSS:
.mytable {
margin: 0px auto;
}
.mytable td {
text-align: left;
border: solid;
padding: 5px;
margin: 0px;
}
.myimg {
display: none;
margin: 0px auto;
}
JQuery:
$("#showimg").click(function(e) {
$("#court").show();
});

You should wrap your table in element with relative position, than place the image (also in container with absolute position). That way you have better control over those elements. Check it out:
$("#showimg").click(function(e) {
$(".myimg").toggle();
});
.mytable {
margin: 0px auto;
}
.mytable td {
text-align: left;
border: solid;
padding: 5px;
margin: 0px;
}
.myimg {
display: none;
position: absolute;
top: 0;
width: 100%;
text-align: center;
}
.table_container {
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='showimg'>
Show/Hide Court
</button>
<div class="table_container">
<table class='mytable'>
<tr>
<td>Michael</td>
<td>Jordan</td>
<td>5</td>
<td>10</td>
</tr>
<tr>
<td>LeBron</td>
<td>James</td>
<td>3</td>
<td>7</td>
</tr>
<tr>
<td>Kobe</td>
<td>Bryant</td>
<td>1</td>
<td>8</td>
</tr>
<tr>
<td>Magic</td>
<td>Johnson</td>
<td>6</td>
<td>11</td>
</tr>
</table>
<div class="myimg">
<img src='http://exchangedownloads.smarttech.com/public/content/2c/2c4cb6ee-579f-4404-b573-c554ba6bf7f4/previews/medium/0001.png' id='court' />
</div>
</div>
Also at updated fiddle

Try this: https://jsfiddle.net/f7g9dtxt/3/
$('.yourImage').toggle();
$("#showimg").click(function(e) {
$('.yourImage').toggle();
});
.mytable td {
text-align: left;
border: solid;
padding: 2px;
margin: 0px;
}
.mytable {
position: absolute;
z-index: 0;
}
.yourImage {
position: absolute;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='showimg'>
Show Court
</button>
<table class='mytable'>
<tr><td>Michael</td><td>Jordan</td><td>5</td><td>10</td></tr>
<tr><td>LeBron</td><td>James</td><td>3</td><td>7</td></tr>
<tr><td>Kobe</td><td>Bryant</td><td>1</td><td>8</td></tr>
<tr><td>Magic</td><td>Johnson</td><td>6</td><td>11</td></tr>
</table>
<span class="yourImage">
Put an img tag here!
</span>

Trying to make fixed table headers with horizontal scroll bar. How to set overflow: auto, but keep margins transparent?

I am trying to make a table with fixed headers and horizontal scrolling functionality, but to do so I need to make the "section"'s top margin transparent in what I have here:
html, body {
margin:0;
padding:0;
height:100%;
}
.section {
position: relative;
border: 1px solid #000;
padding-top: 37px;
background: #500;
margin-top: 37px;
}
.container {
margin-top: -37px;
overflow-y: auto;
height: 200px;
}
table {
border-spacing: 0;
width:100%;
}
td + td {
border-left:1px solid #eee;
}
td, th {
border-bottom:1px solid #eee;
background: #ddd;
color: #000;
padding: 10px 25px;
}
th {
height: 0;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
color: transparent;
border: none;
white-space: nowrap;
}
th div {
position: absolute;
margin-top:-37px;
background: transparent;
color: #fff;
padding: 9px 25px;
top: 0;
margin-left: -25px;
line-height: normal;
border-left: 1px solid #800;
}
th:first-child div {
border: none;
}
<div class="section">
<div class="container">
<table>
<thead>
<tr class="header">
<th>Table attribute name
<div>Table attribute name</div>
</th>
<th>Value
<div>Value</div>
</th>
<th>Description
<div>Description</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>align</td>
<td>left, center, right</td>
<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</td>
</tr>
<tr>
<td>bgcolor</td>
<td>rgb(x,x,x), #xxxxxx, colorname</td>
<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table</td>
</tr>
<tr>
<td>border</td>
<td>1,""</td>
<td>Specifies whether the table cells should have borders or not</td>
</tr>
<tr>
<td>cellpadding</td>
<td>pixels</td>
<td>Not supported in HTML5. Specifies the space between the cell wall and the cell content</td>
</tr>
<tr>
<td>cellspacing</td>
<td>pixels</td>
<td>Not supported in HTML5. Specifies the space between cells</td>
</tr>
<tr>
<td>frame</td>
<td>void, above, below, hsides, lhs, rhs, vsides, box, border</td>
<td>Not supported in HTML5. Specifies which parts of the outside borders that should be visible</td>
</tr>
<tr>
<td>rules</td>
<td>none, groups, rows, cols, all</td>
<td>Not supported in HTML5. Specifies which parts of the inside borders that should be visible</td>
</tr>
<tr>
<td>summary</td>
<td>text</td>
<td>Not supported in HTML5. Specifies a summary of the content of a table</td>
</tr>
<tr>
<td>width</td>
<td>pixels, %</td>
<td>Not supported in HTML5. Specifies the width of a table</td>
</tr>
</tbody>
</table>
</div>
</div>
https://jsfiddle.net/byB9d/6212/
Thanks in advance to anyone with suggestions!
P.S. I would like a pure css solution, please!

I decided to remove most of your css to (hopefully) give a clearer answer to this question. I did however not change any of your html.
Fiddle with code
x-scrolling and width
This method relies on using the "table" as a container for "thead" and "tbody". "table" will determine the scrolling along the x-axis. Therefore it has "overflow-x: auto". This way the "thead" can stay positioned above the "tbody" while scrolling the table. (will be explained later)
This element also determines the width the table will take up on your webpage.
In order for the content to scroll horizontally we have to make sure the total width of "tbody" and "thead" is longer than the width of "table".
Finally you should also add the same width to your cells so the headers appear properly above your data. I did this by applying a width to "tr th:nth-child(1), tr td:nth-child(1)" (for each column).
y-scrolling and height
We want the "thead" to stay positioned on top of our table. Even when we scroll. Therefore we simply convert it to a block element.
The "tbody" is another story. we want to be able to vertically scroll it. Therefore we add "overflow-y: auto" and also set a fixed height for the element (otherwise it will just drop down and not scroll).
The total height of the table will be the height of "thead" and "tbody". The "table will adapt its size to fit it."
The CSS (html is the same as it is in the question post)
td, th {
border-bottom:1px solid #eee;
background: #ddd;
color: #000;
padding: 10px 25px;
}
th div{display: none;} /*why is this html even here!?!?*/
table {
display: block;
position: relative;
border: 1px solid #000;
width: 75%;
border-spacing: 0;
margin: auto;
overflow-x: auto;
}
thead{
display: block;
position: relative;
width: 700px; /*total width of columns*/
}
tbody{
display: block;
position: relative;
height: 250px;
overflow-y: auto;
width: 700px; /*total width of columns.*/
}
tr th:nth-child(1), tr td:nth-child(1){
width: 100px;
}
tr th:nth-child(2), tr td:nth-child(2){
width: 150px;
}
tr th:nth-child(3), tr td:nth-child(3){
width: 450px;
}
PS: I assume this is what you were trying to ask.