CSS When using overflow the gap still remains - javascript

I have created a HTML table and when I use overflow to make it sure it doesn't exceed a certain height the below div is placed in such a way that the text could still fit.
I need to the div to be placed directly below the scrolling table.
I am using overflow: hidden however I can still select the text, but I can't see it.
$('document').ready(function() {
var $table = $('#ingsNeededTable'),
$bodyCells = $table.find('tbody tr:first').children(),
colWidth;
$(window).resize(function() {
colWidth = $bodyCells.map(function() {
return $(this).width();
}).get();
$table.find('thead tr').children().each(function(i, v) {
$(v).width(colWidth[i] + 1);
});
}).resize();
var loop = setInterval(function() {
$("#ingsNeededTable tbody").animate({scrollTop: $("#ingsNeededTable tbody").prop("scrollHeight")}, 100000, "linear");
$("#ingsNeededTable tbody").animate({scrollTop: 0}, 100000, "linear");
}, 1);
});
#ingsNeededTableHolder {
height: 45%;
}
#ingsNeededTitle, #ingsRecentTitle {
text-align: center;
}
#ingsNeededTable {
border-collapse: collapse;
width: 100%;
}
#ingsNeededTable th, #ingsNeededTable td {
border-bottom: 1px solid black;
}
#ingsNeededTable thead {
display: block;
width: 100%;
}
#ingsNeededTable tbody {
display: block;
height: 40%;
overflow-y: hidden;
width: 100%;
}
.ingsNeededTableIng, .ingsNeededTableProd {
width: 40%;
}
.ingsNeededTableNeeded {
width: 10%
}
#ingsNeededTable tr:nth-child(even) {
background-color: #eaf2f1
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id='ingsNeededTableHolder'>
<table id='ingsNeededTable'>
<thead>
<tr>
<th class='ingsNeededTableIng'>Ingredient</th>
<th class='ingsNeededTableNeeded'>Needed (Kg)</th>
<th class='ingsNeededTableProd'>Product</th>
</tr>
</thead>
<tbody>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
</tbody>
</table>
</div>
<div>
<h2>This Should Be Below The Scrolling Table</h2>
</div>
The table is properly aligned on my page, but it isn't on the snippet for some reason.


Set max-height to #ingsNeededTableHolder
#ingsNeededTableHolder {
height: 45%;
max-height: 150px;
overflow: hidden;
}
$('document').ready(function() {
var $table = $('#ingsNeededTable'),
$bodyCells = $table.find('tbody tr:first').children(),
colWidth;
$(window).resize(function() {
colWidth = $bodyCells.map(function() {
return $(this).width();
}).get();
$table.find('thead tr').children().each(function(i, v) {
$(v).width(colWidth[i] + 1);
});
}).resize();
var loop = setInterval(function() {
$("#ingsNeededTable tbody").animate({scrollTop: $("#ingsNeededTable tbody").prop("scrollHeight")}, 100000, "linear");
$("#ingsNeededTable tbody").animate({scrollTop: 0}, 100000, "linear");
}, 1);
});
#ingsNeededTableHolder {
height: 45%;
max-height: 150px;
overflow: hidden;
}
#ingsNeededTitle, #ingsRecentTitle {
text-align: center;
}
#ingsNeededTable {
border-collapse: collapse;
width: 100%;
}
#ingsNeededTable th, #ingsNeededTable td {
border-bottom: 1px solid black;
}
#ingsNeededTable thead {
display: block;
width: 100%;
}
#ingsNeededTable tbody {
display: block;
height: 40%;
overflow-y: hidden;
width: 100%;
}
.ingsNeededTableIng, .ingsNeededTableProd {
width: 40%;
}
.ingsNeededTableNeeded {
width: 10%
}
#ingsNeededTable tr:nth-child(even) {
background-color: #eaf2f1
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id='ingsNeededTableHolder'>
<table id='ingsNeededTable'>
<thead>
<tr>
<th class='ingsNeededTableIng'>Ingredient</th>
<th class='ingsNeededTableNeeded'>Needed (Kg)</th>
<th class='ingsNeededTableProd'>Product</th>
</tr>
</thead>
<tbody>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
<tr>
<td class='ingsNeededTableIng'>foo</td>
<td class='ingsNeededTableNeeded'>foo</td>
<td class='ingsNeededTableProd'>foo</td>
</tr>
</tbody>
</table>
</div>
<div>
<h2>This Should Be Below The Scrolling Table</h2>
</div>

Related

can't show/hide a table column in responsive mode

I have a problem with the button there are not working. When clicking on the button it is supposed to show another column and hide the others for mobile view. I tried it with JavaScript and add onclick function but its the same it does not show the other column. for example when clicking the button number 2 it should hide column with class second-column,forth-column,fifth-column and show column third-column
In the code you will see I used javascript and also css and none works
function myFun(){
document.getElementsByClassName("second-column").style.display="block";
document.getElementsByClassName("third-column").style.display="none";
document.getElementsByClassName("forth-column").style.display="none";
document.getElementsByClassName("fifth-column").style.display="none";
}
function myFunc(){
document.getElementsByClassName("second-column").style.display="none";
document.getElementsByClassName("third-column").style.display="block";
document.getElementsByClassName("forth-column").style.display="none";
document.getElementsByClassName("fifth-column").style.display="none";
}
function myFunct(){
document.getElementsByClassName("second-column").style.display="none";
document.getElementsByClassName("third-column").style.display="none";
document.getElementsByClassName("forth-column").style.display="block";
document.getElementsByClassName("fifth-column").style.display="none";
}
function myFuncti(){
document.getElementsByClassName("second-column").style.display="none";
document.getElementsByClassName("third-column").style.display="none";
document.getElementsByClassName("forth-column").style.display="none";
document.getElementsByClassName("fifth-column").style.display="block";
}
#media all and (max-width:900px) {
.table {
width: 100%;
}
.second-column {
width: 50%;
}
.space {
display: none;
}
.third-column {
display: none;
}
.forth-column {
display: none;
}
.fifth-column {
display: none;
}
.table.fixed {
table-layout: fixed;
}
td:first-child {
width: 50%;
}
.btn-div {
display: block !important;
}
#btn-1:focus~.second-column {
display: block!important;
}
#btn-1:focus~.third-column,
.forth-column,
.fifth-column {
display: none!important;
}
#btn-2:focus~.third-column {
display: block!important;
}
#btn-2:focus~.second-column,
.forth-column,
.fifth-column {
display: none!important;
}
#btn-3:focus~.forth-column {
display: block!important;
}
#btn-3:focus~.second-column,
.third-column,
.fifth-column {
display: none!important;
}
#btn-4:focus~.fifth-column {
display: block!important;
}
#btn-4:focus~.second-column,
.third-column,
.forth-column {
display: none!important;
}
}
<div>
<table class="table fixed">
<tr>
<th style="border-bottom: none;"></th>
<th class="space"></th>
<th class="second-column">111</th>
<th class="third-column">222 </th>
<th class="forth-column">333 </th>
<th class="fifth-column">444 </th>
</tr>
<tr>
<td> !</td>
<td class="space"></td>
<td class="second-column"> 1</td>
<td class="third-column"> 2</td>
<td class="forth-column"> 3</td>
<td class="fifth-column">4</td>
</tr>
<tr>
<td> %</td>
<td class="space"></td>
<td class="second-column"> 1</td>
<td class="third-column"> 2</td>
<td class="forth-column"> 3</td>
<td class="fifth-column"> 4</td>
</tr>
<tr>
<td>$</td>
<td class="space"></td>
<td class="second-column"> 1</td>
<td class="third-column">2</td>
<td class="forth-column"> 3</td>
<td class="fifth-column"> 4</td>
</tr>
<tr>
<td> #</td>
<td class="space"></td>
<td class="second-column"> 1</td>
<td class="third-column"> 2</td>
<td class="forth-column"> 3</td>
<td class="fifth-column"> 4</td>
</tr>
<tr>
<td> #</td>
<td class="space"></td>
<td class="second-column"> 1</td>
<td class="third-column">2</td>
<td class="forth-column"> 3</td>
<td class="fifth-column"> 4</td>
</tr>
<tr>
<td>$$ </td>
<td class="space"></td>
<td class="second-column"> 1</td>
<td class="third-column"> 2</td>
<td class="forth-column"> 3</td>
<td class="fifth-column">4</td>
</tr>
</table>
<div style="text-align: center;display: none;" class="btn-div">
<button type="button" class="this-btn add-add" id="btn-1" onClick="myFun()">1</button>
<button type="button" class="this-btn add-add" id="btn-2" onClick="myFunc()">2</button>
<button type="button" class="this-btn add-add"id="btn-3" onClick="myFunct()" >3</button>
<button type="button" class="this-btn add-add" id="btn-4" onClick="myFuncti()">4</button>
</div>
</div>

I knew the problem. when using getElementsByClassName() it returns html Collection. So it combine all element in node list so if I want to access a certain element i should use the index number of that element.
For example:
document.getElementsByClassName('second-column')[0].style.display="none";
but if you want to change or access all elements then you should use loops
this solves my problem:
function myFun(){
[...document.getElementsByClassName("second-column")].forEach(e => e.style.display = "table-cell");
[...document.getElementsByClassName("third-column")].forEach(e => e.style.display = "none");
[...document.getElementsByClassName("forth-column")].forEach(e => e.style.display = "none");
[...document.getElementsByClassName("fifth-column")].forEach(e => e.style.display = "none");
}
Or this way:
var x = document.getElementsByClassName('third-column');
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
and repeat it for every class Name

How to Hide a Collapsible table (except for top row) by default

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);
})

jquery length between two selector

I want get length <td> between two selector .bg-primary and booked:first-child, what do i do?
I am trying as following code but it doesn't work: (i want result as:"num:5")
var term3 = document.getElementsByClassName( "booked" );
var vrtid = $( ".bg-primary" ).nextUntil( term3, "td" ).length;
alert('num:'+vrtid);
.booked {
color: rgb(255, 250, 81) !important;
background-color: #009975 !important;
}
.bg-primary {
color: #fff !important;
background-color: #337ab7 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td data-name="disabled-day">29</td>
<td data-name="disabled-day">30</td>
<td data-name="disabled-day">01</td>
<td data-name="disabled-day">02</td>
<td data-name="disabled-day">03</td>
<td data-name="disabled-day">04</td>
<td data-name="disabled-day" class="text-danger">05</td>
</tr>
<tr>
<td data-name="disabled-day">06</td>
<td data-name="disabled-day">07</td>
<td data-name="disabled-day">08</td>
<td data-name="disabled-day">09</td>
<td data-name="disabled-day">10</td>
<td data-name="disabled-day">11</td>
<td data-name="disabled-day" class="text-danger">12</td>
</tr>
<tr>
<td data-name="disabled-day">13</td>
<td data-name="disabled-day">14</td>
<td data-name="disabled-day">15</td>
<td data-name="disabled-day">16</td>
<td data-name="disabled-day">17</td>
<td data-name="disabled-day">18</td>
<td data-name="disabled-day" class="text-danger">19</td>
</tr>
<tr>
<td data-name="disabled-day">20</td>
<td data-name="disabled-day">21</td>
<td data-name="disabled-day">22</td>
<td data-name="disabled-day">23</td>
<td data-name="today" class="bg-primary">24</td>
<td data-name="day">25</td>
<td data-name="day" class="text-danger">26</td>
</tr>
<tr>
<td data-name="day">27</td>
<td data-name="day">28</td>
<td data-name="disabled-day" class="booked">29</td>
<td data-name="disabled-day" class="booked">30</td>
<td data-name="disabled-day">01</td>
<td data-name="disabled-day">02</td>
<td data-name="disabled-day">03</td>
</tr>
</tbody>
</table>

You could subtract indices:
var vrtid = $('.booked:first').index('td') - $('.bg-primary').index('td');
alert('num:'+vrtid);
.booked {
color: rgb(255, 250, 81) !important;
background-color: #009975 !important;
}
.bg-primary {
color: #fff !important;
background-color: #337ab7 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td data-name="disabled-day">29</td>
<td data-name="disabled-day">30</td>
<td data-name="disabled-day">01</td>
<td data-name="disabled-day">02</td>
<td data-name="disabled-day">03</td>
<td data-name="disabled-day">04</td>
<td data-name="disabled-day" class="text-danger">05</td>
</tr>
<tr>
<td data-name="disabled-day">06</td>
<td data-name="disabled-day">07</td>
<td data-name="disabled-day">08</td>
<td data-name="disabled-day">09</td>
<td data-name="disabled-day">10</td>
<td data-name="disabled-day">11</td>
<td data-name="disabled-day" class="text-danger">12</td>
</tr>
<tr>
<td data-name="disabled-day">13</td>
<td data-name="disabled-day">14</td>
<td data-name="disabled-day">15</td>
<td data-name="disabled-day">16</td>
<td data-name="disabled-day">17</td>
<td data-name="disabled-day">18</td>
<td data-name="disabled-day" class="text-danger">19</td>
</tr>
<tr>
<td data-name="disabled-day">20</td>
<td data-name="disabled-day">21</td>
<td data-name="disabled-day">22</td>
<td data-name="disabled-day">23</td>
<td data-name="today" class="bg-primary">24</td>
<td data-name="day">25</td>
<td data-name="day" class="text-danger">26</td>
</tr>
<tr>
<td data-name="day">27</td>
<td data-name="day">28</td>
<td data-name="disabled-day" class="booked">29</td>
<td data-name="disabled-day" class="booked">30</td>
<td data-name="disabled-day">01</td>
<td data-name="disabled-day">02</td>
<td data-name="disabled-day">03</td>
</tr>
</tbody>
</table>

How to add nested numbering on html table (1.1 , 1.2)?

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.

How can I keep this table header fixed?

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)

Categories

Resources