I'd like to keep this table header fixed, the problem is when I set the thead position to fixed it loses its size. Basically, I just want to keep the thead from moving with the rest of the table but with its original shape and size.
Thanks in advance.
table {
margin: 100 0 100 0;
width: 100%;
}
th,
td,
table {
/*word-wrap: break-word;*/
border: 1px solid black;
border-radius: 3px;
}
body {
overflow: hidden;
}
.scrollable {
height: 100%;
display: flex;
flex-direction: column;
overflow-y: scroll;
}
thead {
position: fixed;
width: 100%;
}
.myHead {
width: auto;
border: 11px solid blue;
}
<!DOCTYPE html>
<html>
<head>
<title>MyTable</title>
</head>
<body>
<div class="scrollable">
<table>
<thead>
<tr class="myHead">
<th class="header" align="center">Title</th>
<th class="header" align="center">Title</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">id</td>
<td align="center">id</td>
</tr>
<tr>
<td align="center">id</td>
<td align="center">id</td>
</tr>
<tr>
<td align="center">id</td>
<td align="center">id</td>
</tr>
<tr>
<td align="center">id</td>
<td align="center">id</td>
</tr>
<tr>
<td align="center">id</td>
<td align="center">id</td>
</tr>
<tr>
<td align="center">id</td>
<td align="center">id</td>
</tr>
<tr>
<td align="center">id</td>
<td align="center">id</td>
</tr>
<tr>
<td align="center">id</td>
<td align="center">id</td>
</tr>
<tr>
<td align="center">id</td>
<td align="center">id</td>
</tr>
<tr>
<td align="center">id</td>
<td align="center">id</td>
</tr>
<tr>
<td align="center">id</td>
<td align="center">id</td>
</tr>
</tbody>
</table>
</div>
<div>----------------200px--------------></div>
</body>
</html>
Check out this question as it provides several resources that may help you solve your problem:
Freeze the top row for an html table only (Fixed Table Header Scrolling)
(Couldn't post a comment because I don't have the required reputation)
Related
I have a table, when I add a row to it, the row's height will fill the whole body of the table. I want to force the height to only be around 10% of the tables body height, and let the rest of the tabe body to be empty. I've tried adding a height propery of 10% to the tbody tr selector but nothing happens. My goal is to have a row take up about 10% of the open area, and then when I click add row, another one will appear under it until the whole table body is full of rows.
Here is my code
#home-index {
margin-top: 10px;
}
tbody {
height: 604px;
}
td {
border: 1px solid lightgray;
}
.hours-cell:hover {
background-color: darkorange;
}
tr {
border: 1px solid lightgray;
}
th {
border: 1px solid lightgray;
}
.dropdown {
width: 25%
}
<table>
<thead>
<tr>
<th>Project</th>
<th>Task</th>
<th>7/11</th>
<th>7/12</th>
<th>7/13</th>
<th>Total Hours</th>
</tr>
</thead>
<tbody>
<tr>
<td class="dropdown">
<select asp-for="Project" asp-items="Model.Projects"></select>
</td>
<td class="dropdown">
<select asp-for="Task"></select>
</td>
<td class="hours-cell">--</td>
<td class="hours-cell">--</td>
<td class="hours-cell">--</td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Overall Totals</td>
<td class="hours-cell">--</td>
<td class="hours-cell">--</td>
<td class="hours-cell">--</td>
<td></td>
</tr>
<tr>
<td colspan="2">Over/Under</td>
<td class="hours-cell">--</td>
<td class="hours-cell">--</td>
<td class="hours-cell">--</td>
<td></td>
</tr>
</tfoot>
</table>
I hope this helps your problem. I added an empty <tr> at the very end of the body with a different class. You can style this row however you like to make it look like an empty body. Any rows you add should be added above this one.
#home-index {
margin-top: 10px;
}
tbody {
height: 604px;
}
td {
border: 1px solid lightgray;
}
.hours-cell:hover {
background-color: darkorange;
}
tr {
border: 1px solid lightgray;
}
th {
border: 1px solid lightgray;
}
.dropdown {
width: 25%
}
tbody tr {
height: 10%
}
.extra {
height: 100%
}
<table>
<thead>
<tr>
<th>Project</th>
<th>Task</th>
<th>7/11</th>
<th>7/12</th>
<th>7/13</th>
<th>Total Hours</th>
</tr>
</thead>
<tbody>
<tr>
<td class="dropdown">
<select asp-for="Project" asp-items="Model.Projects"></select>
</td>
<td class="dropdown">
<select asp-for="Task"></select>
</td>
<td class="hours-cell">--</td>
<td class="hours-cell">--</td>
<td class="hours-cell">--</td>
<td></td>
</tr>
<tr class="extra">
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Overall Totals</td>
<td class="hours-cell">--</td>
<td class="hours-cell">--</td>
<td class="hours-cell">--</td>
<td></td>
</tr>
<tr>
<td colspan="2">Over/Under</td>
<td class="hours-cell">--</td>
<td class="hours-cell">--</td>
<td class="hours-cell">--</td>
<td></td>
</tr>
</tfoot>
</table>
For my site I have a table which I've done here: https://jsfiddle.net/stw4jyq8/
table {
width: 600px;
}
th,
td {
padding: 7px 10px 10px 10px;
}
th {
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 90%;
bottom-border: 2px solid #111111;
border-top: 1px solid #999;
text-align: left;
}
tr.even {
background-color: #efefef;
}
tr:hover {
background-color: #c3e6e5;
}
<table width="50%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th></th>
<th>Per 4 Pack(200G)</th>
<th>Per 100g</th>
<th>Per Buttery(50G)</th>
</tr>
<tr>
<th>Calories</th>
<td>724</td>
<td>362</td>
<td>181</td>
</tr>
<tr class="even">
<th>Fat</th>
<td>43.1g</td>
<td>21.6g</td>
<td>10.8g</td>
</tr>
<tr>
<th>Saturated</th>
<td>15.7g</td>
<td>7.9g</td>
<td>3.9g</td>
</tr>
<tr class="even">
<th>Sodium</th>
<td>1,941.9mg</td>
<td>971mg</td>
<td>485.5mg</td>
</tr>
<tr>
<th>Carbohydrates</th>
<td>78.6g</td>
<td>39.3g</td>
<td>19.7g</td>
</tr>
<tr class="even">
<th>Fiber</th>
<td>0g</td>
<td>0g</td>
<td>0g</td>
</tr>
<tr>
<th>Sugar</th>
<td>10.9g</td>
<td>5.5g</td>
<td>2.7g</td>
</tr>
<tr class="even">
<th>Protein</th>
<td>10.5g</td>
<td>5.3g</td>
<td>2.6g</td>
</tr>
</table>
It looks fine when being viewed on a laptop but it doesn't look great when in mobile view. What I'm looking to do is that when I'm in mobile view it will change to something like:
and then underneath it will be a separate table for per 100g and then a 3rd for per buttery if that makes sense?
For this I am not sure how I could go about that though, would someone be able to point me in the right direction?
I'm thinking this is the best direction to go with? Unless someone has a better idea? Thanks again.
As a first lead, and despite agreeing with the suggestions for a select box, here's how you would have to do it with 3 tables for mobile:
Show your table as you did, but set a class to the columns to ease hiding them and styling them in general
Repeat your table 2 more times with only one data column each time (per 100g, per buttery)
Hide those 2 additional tables on large screens (by default) using CSS
Use a media query to trigger the changes:
Hide 3rd and 4th columns in your large table
Show both mobile tables
Adjust widths for better display
You can see the change in display in the below snippet by adjusting your window size
table.main {
width: 600px;
}
table.mobile {
display: none;
}
table.composition {
border: none;
border-spacing: 0;
border-collapse: collapse;
}
th,
td {
padding: 7px 10px 10px 10px;
}
th {
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 90%;
bottom-border: 2px solid #111111;
border-top: 1px solid #999;
text-align: left;
}
tr:nth-child(2n) {
background-color: #efefef;
}
tr:hover {
background-color: #c3e6e5;
}
#media screen and (max-width: 600px) {
table.main .per-50g {
display: none;
}
table.main .per-100g {
display: none;
}
table.mobile {
display: table;
}
table.composition {
width: 100%;
}
table.composition td {
width: 50%;
}
}
<table class="main composition">
<tr>
<th></th>
<th>Per 4 Pack(200G)</th>
<th class="per-100g">Per 100g</th>
<th class="per-50g">Per Buttery(50G)</th>
</tr>
<tr>
<th>Calories</th>
<td>724</td>
<td class="per-100g">362</td>
<td class="per-50g">181</td>
</tr>
<tr>
<th>Fat</th>
<td>43.1g</td>
<td class="per-100g">21.6g</td>
<td class="per-50g">10.8g</td>
</tr>
<tr>
<th>Saturated</th>
<td>15.7g</td>
<td class="per-100g">7.9g</td>
<td class="per-50g">3.9g</td>
</tr>
<tr>
<th>Sodium</th>
<td>1,941.9mg</td>
<td class="per-100g">971mg</td>
<td class="per-50g">485.5mg</td>
</tr>
<tr>
<th>Carbohydrates</th>
<td>78.6g</td>
<td class="per-100g">39.3g</td>
<td class="per-50g">19.7g</td>
</tr>
<tr>
<th>Fiber</th>
<td>0g</td>
<td class="per-100g">0g</td>
<td class="per-50g">0g</td>
</tr>
<tr>
<th>Sugar</th>
<td>10.9g</td>
<td class="per-100g">5.5g</td>
<td class="per-50g">2.7g</td>
</tr>
<tr>
<th>Protein</th>
<td>10.5g</td>
<td class="per-100g">5.3g</td>
<td class="per-50g">2.6g</td>
</tr>
</table>
<table class="mobile per-100g composition">
<tr>
<th></th>
<th class="per-100g">Per 100g</th>
</tr>
<tr>
<th>Calories</th>
<td class="per-100g">362</td>
</tr>
<tr>
<th>Fat</th>
<td class="per-100g">21.6g</td>
</tr>
<tr>
<th>Saturated</th>
<td class="per-100g">7.9g</td>
</tr>
<tr>
<th>Sodium</th>
<td class="per-100g">971mg</td>
</tr>
<tr>
<th>Carbohydrates</th>
<td class="per-100g">39.3g</td>
</tr>
<tr>
<th>Fiber</th>
<td class="per-100g">0g</td>
</tr>
<tr>
<th>Sugar</th>
<td class="per-100g">5.5g</td>
</tr>
<tr>
<th>Protein</th>
<td class="per-100g">5.3g</td>
</tr>
</table>
<table class="mobile per-50g composition">
<tr>
<th></th>
<th class="per-50g">Per Buttery(50G)</th>
</tr>
<tr>
<th>Calories</th>
<td class="per-50g">181</td>
</tr>
<tr>
<th>Fat</th>
<td class="per-50g">10.8g</td>
</tr>
<tr>
<th>Saturated</th>
<td class="per-50g">3.9g</td>
</tr>
<tr>
<th>Sodium</th>
<td class="per-50g">485.5mg</td>
</tr>
<tr>
<th>Carbohydrates</th>
<td class="per-50g">19.7g</td>
</tr>
<tr>
<th>Fiber</th>
<td class="per-50g">0g</td>
</tr>
<tr>
<th>Sugar</th>
<td class="per-50g">2.7g</td>
</tr>
<tr>
<th>Protein</th>
<td class="per-50g">2.6g</td>
</tr>
</table>
You could use some javascript to duplicate the table, if that suits your use case.
I have the following html and would like to hide the collapsible table by default, only showing the top row. Which when clicked on, will pop out the rest of the table. Right now, it shows the whole table, only to hide once toggled.
<html>
<style>
table {
width: 300px;
border-collapse: collapse;
border-color: grey;
line-height: 1.7;
}
th {
background: #ffffff;
color: #000000;
font-weight: bold;
}
td, th {
border: 1px solid #ccc;
text-align: center;
font-size: 14px;
}
td {
color: #000000;
}
.labels tr td {
font-weight: bold;
color: #feb330;
}
.label tr td label {
display: block;
}
.bold {
font-weight: bold;
}
[data-toggle="toggle"] {
display: none;
}
</style>
<table>
<tbody class="labels">
<tr bgcolor="#ffffff">
<td colspan="3">
<label for="14Season">2014 Season: 19</label>
<input type="checkbox" name="14Season" id="14Season" data-toggle="toggle">
</tr>
</tbody>
<tbody class="hide">
<tr bgcolor="#264033">
<td class="bold" colspan="1" style="color:#ffffff">Date</td>
<td class="bold" colspan="1" style="color:#ffffff">Scorigami</td>
<td class="bold" colspan="1" style="color:#ffffff">Total</td>
</tr>
<tr bgcolor="#000000">
<td style="color:#ffffff">9/21/13</td>
<td style="color:#ffffff">0-6 L</td>
<td style="color:#ffffff">1</td>
</tr>
<tr bgcolor="#264033">
<td style="color:#ffffff">9/21/13</td>
<td style="color:#ffffff">8-10 L</td>
<td style="color:#ffffff">2</td>
</tr>
<tr bgcolor="#000000">
<td style="color:#ffffff">9/22/13</td>
<td style="color:#ffffff">10-8 W</td>
<td style="color:#ffffff">3</td>
</tr>
<tr bgcolor="#264033">
<td style="color:#ffffff">10/19/13</td>
<td style="color:#ffffff">3-2 W</td>
<td style="color:#ffffff">4</td>
</tr>
<tr bgcolor="#000000">
<td style="color:#ffffff">10/19/13</td>
<td style="color:#ffffff">1-4 L</td>
<td style="color:#ffffff">5</td>
</tr>
<tr bgcolor="#264033">
<td style="color:#ffffff">10/26/13</td>
<td style="color:#ffffff">7-0 W</td>
<td style="color:#ffffff">6</td>
</tr>
<tr bgcolor="#000000">
<td style="color:#ffffff">4/11/14</td>
<td style="color:#ffffff">7-2 W</td>
<td style="color:#ffffff">7</td>
</tr>
<tr bgcolor="#264033">
<td style="color:#ffffff">4/11/14</td>
<td style="color:#ffffff">7-1 W</td>
<td style="color:#ffffff">8</td>
</tr>
<tr bgcolor="#000000">
<td style="color:#ffffff">4/12/14</td>
<td style="color:#ffffff">13-6 W</td>
<td style="color:#ffffff">9</td>
</tr>
<tr bgcolor="#264033">
<td style="color:#ffffff">4/12/14</td>
<td style="color:#ffffff">10-2 W</td>
<td style="color:#ffffff">10</td>
</tr>
<tr bgcolor="#000000">
<td style="color:#ffffff">4/13/14</td>
<td style="color:#ffffff">12-0 W</td>
<td style="color:#ffffff">11</td>
</tr>
<tr bgcolor="#264033">
<td style="color:#ffffff">4/26/14</td>
<td style="color:#ffffff">8-2 W</td>
<td style="color:#ffffff">12</td>
</tr>
<tr bgcolor="#000000">
<td style="color:#ffffff">4/26/14</td>
<td style="color:#ffffff">7-5 W</td>
<td style="color:#ffffff">13</td>
</tr>
<tr bgcolor="#264033">
<td style="color:#ffffff">4/27/14</td>
<td style="color:#ffffff">9-1 W</td>
<td style="color:#ffffff">14</td>
</tr>
<tr bgcolor="#000000">
<td style="color:#ffffff">5/2/14</td>
<td style="color:#ffffff">10-0 W</td>
<td style="color:#ffffff">15</td>
</tr>
<tr bgcolor="#264033">
<td style="color:#ffffff">5/3/14</td>
<td style="color:#ffffff">4-2 W</td>
<td style="color:#ffffff">16</td>
</tr>
<tr bgcolor="#000000">
<td style="color:#ffffff">5/4/14</td>
<td style="color:#ffffff">10-4 W</td>
<td style="color:#ffffff">17</td>
</tr>
<tr bgcolor="#264033">
<td style="color:#ffffff">5/16/14</td>
<td style="color:#ffffff">1-2 L</td>
<td style="color:#ffffff">18</td>
</tr>
<tr bgcolor="#000000">
<td style="color:#ffffff">5/17/14</td>
<td style="color:#ffffff">7-12 L</td>
<td style="color:#ffffff">19</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function() {
$('[data-toggle="toggle"]').change(function(){
$(this).parents().next('.hide').toggle();
});
});
</script>
</html>
I believe only a small change is required, but can't seem to get it right. Thanks for the help!
Adding
.hide {
display: none;
}
fixed the issue.
table {
display: none;
}
this should work. Also change,
[data-toggle="toggle"] {
display: block;
}
you can give to the table rows logical id's, then use a function to hide/show them
code to retrieve the table rows id's
var table = document.querySelector('table');
// listen for a click
table.addEventListener('click', function(ev){
// get the event targets ID
var serviceID = ev.target.id;
alert(serviceID);
})
I have tried searching, but I am stuck.
Basically I am making a jeopardy game board; which I created using a table. I would like to change the background-color of the td after it has been clicked on. The challenge I am facing is that (1) I am using a link to direct to the question/answer (yes, I know this could be done other ways, but I need to learn more to advance and I am working on that); (2) After searching for answers, I can't seem to get it to work with the code I have.
Here is my [JSFiddle]https://jsfiddle.net/hLyauL5a/)
Html:
<table>
<thead>
<tr>
<th>Stuff</th>
<th>Stuff </th>
<th>Stuff</th>
<th>Stuff</th>
<th>Stuff</th>
</tr>
</thead>
<tbody>
<tr>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>200</td>
<td>200</td>
<td>200</td>
<td>200</td>
<td>200</td>
</tr>
<tr>
<td>300</td>
<td>300</td>
<td>300</td>
<td>300</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>400</td>
<td>400</td>
<td>400</td>
<td>400</td>
</tr>
<tr>
<td>500</td>
<td>500</td>
<td>500</td>
<td>500</td>
<td>500</td>
</tr>
</tbody>
</table>
CSS:
jQuery code:
$("table tr td").click(function() {
$(this).css("background", "#626975");
});
I would appreciate any help!
I see two problems. One, you have not included jquery or your javascript file in your html. Your jsfiddle does not have jquery loaded.
Two, assuming the above was just a problem getting your question across on Stack Overflow, you haven't waited for the document to load before attaching event listeners. The selector tries to select something that isn't there yet, and nothing is attached. What you need is:
$(document).on('ready', function(){
$("table tr td").click(function(e) {
$(this).css("background", "#626975");
});
});
Working example:
$(()=> {
$("table tr td").click(function() {
$(this).css("background", "#626975");
});
});
body {
cursor: pointer;
}
/*gameboard*/
table {
width: 100%;
border-collapse: collapse;
}
tr {
background: #1f293a;
color: #47ba04;
}
th {
background: #1f293a;
color: white;
font-weight: bold;
min-width: 200px;
}
td {
color: #47ba04;
background: #1f293a;
min-width: 100px;
height: 130px;
}
td,
th {
padding: 6px;
border: 1px solid #ccc;
text-align: center;
}
a {
color: #47ba04;
text-decoration: none;
}
/* For the question pages*/
#question,
#answers {
width: 100%;
height: 800px;
border: 1px solid black;
background-color: #1f293a;
color: white;
font-weight: bold;
}
div.question h2,
div.answers h2 {
margin: 0;
position: absolute;
top: 40%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Stuff</th>
<th>Stuff</th>
<th>Stuff</th>
<th>Stuff</th>
<th>Stuff</th>
</tr>
</thead>
<tbody>
<tr>
<td>100
</td>
<td>100
</td>
<td>100
</td>
<td>100
</td>
<td>100
</td>
</tr>
<tr>
<td>200
</td>
<td>200
</td>
<td>200
</td>
<td>200
</td>
<td>200
</td>
</tr>
<tr>
<td>300
</td>
<td>300
</td>
<td>300
</td>
<td>300
</td>
<td>300
</td>
</tr>
<tr>
<td>400
</td>
<td>400
</td>
<td>400
</td>
<td>400
</td>
<td>400
</td>
</tr>
<tr>
<td>500
</td>
<td>500
</td>
<td>500
</td>
<td>500
</td>
<td>500
</td>
</tr>
</tbody>
</table>
You could launch the links in a new window by adding target="_blank" attribute to your anchor tags:
<td>100</td>
$('a').click(function(e){
e.preventDefault();
$(this).parent().css('background-color','blue');
});
So,using JQuery, if you click on an tag, don't jump on whatever link it is, you prevent the default event, then you get its parent which is the element and you add the css style as shown. Here is the html that I used as an example:
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td >Table</td>
<td bgcolor="#00FF00">$100</td>
</tr>
Generally, a hyperlinks like <a herf="" onclick="">contain two events: onclick and herf. The order of execution --- 'onclick' in front of 'herf'. so making onclick method return 'false' if you want to page can't jump on whatever link it is when you click hyperlink. Code is as follows.
$(function(){
$("a").on("click",function(){
$(this).css("background", "#626975");
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Stuff</th>
<th>Stuff</th>
<th>Stuff</th>
</tr>
</thead>
<tbody>
<tr>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
</tbody>
</table>
I am trying to add nested numbering on a table in which n number of trs can be added dynamically trs added dynamically.
.ssection {
background-color: lightgrey;
border-bottom: thin dotted black;
}
.sLot {
padding-left: 30px;
background-color: lightgrey;
}
.sLotDesc {
padding-left: 40px;
background-color: lightgrey;
}
.sLotExtendedPrc {
background-color: lightgrey;
width: 100%;
text-align: right;
}
.sLotSavingPrc {
background-color: lightgrey;
width: 100%;
text-align: right;
}
.sLotLineItem {
background-color: lightyellow;
padding-left: 90px;
}
.sLotLineItemPrice,
.sLotLineItemQuantity,
.sLotLineItemExtendedPrice,
.sLotLineItemSaving {
background-color: lightyellow;
width: 100%;
text-align: right;
}
<table style="width:100%;">
<tr class="ssection">
<td colspan="4">Introduction</td>
<tr class="sLot">
<td class="sLot" colspan="4">Laptops and Desktops</td>
<tr class="sLotDesc">
<td class="sLotDesc" colspan="4">Laptop Description</td>
</tr>
</tr>
<tr >
<td></td>
<td>Initial</td>
<td>Historic</td>
<td>Reserve</td>
</tr>
<tr class="ssection">
<td colspan="4">Pricing</td>
</tr>
<tr class="sLot">
<td class="sLot" colspan="4">Lot tile</td>
</tr>
<tr class="sLotDesc">
<td class="sLotDesc" colspan="4">Lot Description</td>
</tr>
<tr class="sLotExtendedPrc">
<td class="sLotExtendedPrc">Extended Prc</td>
<td class="sLotExtendedPrcInitialVal">110</td>
<td class="sLotExtendedPrcHistoricVal">110</td>
<td class="sLotExtendedPrcReserveVal">110</td>
</tr>
<tr class="sLotSavingPrc">
<td class="sLotSavingPrc">Saving Prc</td>
<td class="sLotSavingPrcInitialVal">120</td>
<td class="sLotSavingPrcHistoricVal">120</td>
<td class="sLotSavingPrcReserveVal">120</td>
</tr>
<tr class="sLotLineItem">
<td class="sLotLineItem">Lineitem 1</td>
</tr>
<tr class="sLotLineItemPrice">
<td class="sLotLineItemPrice">Price</td>
<td class="sLotLineItemPriceInititalVal">130</td>
<td class="sLotLineItemPriceHistoricVal">130</td>
<td class="sLotLineItemPriceReserveVal">130</td>
</tr>
<tr class="sLotLineItemQuantity">
<td class="sLotLineItemQuantity">Quantity</td>
<td class="sLotLineItemQuantityInitialVal">140</td>
<td class="sLotLineItemQuantityHistoricVal">140</td>
<td class="sLotLineItemQuantityReserveVal">140</td>
</tr>
<tr class="sLotLineItemExtendedPrice">
<td class="sLotLineItemExtendedPrice">Extended Price</td>
<td class="sLotLineItemExtendedPriceInitialVal">150</td>
<td class="sLotLineItemExtendedPriceHistoricVal">150</td>
<td class="sLotLineItemExtendedPriceReserveVal">150</td>
</tr>
<tr class="sLotLineItemSaving">
<td class="sLotLineItemSaving">Saving</td>
<td class="sLotLineItemSavingInitialVal">160</td>
<td class="sLotLineItemSavingHistoricVal">160</td>
<td class="sLotLineItemSavingReserveVal">160</td>
</tr>
<table>
Desired Result
Sections are the outer units. Sections can contain any number of lots, every lot in turn can contain many lineitems.