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

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

Related

How to calculate the difference of two values in a <td> tag in another <td> tag in HTML

I have a table in HTML which is rendered and it is like,
{% for element in combined_list %}
<td id='first'>element.first</td>
<td id='second'>element.second</td>
<td id='diff>I want the difference of first and second here</td>
{% endfor %}
I tried with jQuery also like:
jQuery(document).ready(function($) {
let first_= jQuery('#first','/^[0-9]*$/' ).text();
let second_ = jQuery('#second').html();
let diff = first_- second_ ;
$('#diff').html(diff)
});
But Im getting for only one column. Thanks in advance.

You can't have multiple column with the same id, use class instead
$(document).ready(function(){
var rows = document.getElementById("table").getElementsByTagName("tr");
for(var i = 0; i < rows.length; i++)
{
var first = parseInt(rows[i].getElementsByClassName("first")[0].textContent);
var second = parseInt(rows[i].getElementsByClassName("second")[0].textContent);
var diff = first - second;
console.log("First: "+first+" - second : "+second+" = "+diff);
rows[i].getElementsByClassName("diff")[0].textContent = diff;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='table'>
<tr>
<td class='first'>5</td>
<td class='second'>4</td>
<td class='diff'>diffhere</td>
</tr>
<tr>
<td class='first'>9</td>
<td class='second'>3</td>
<td class='diff'>diffhere</td>
</tr>
</table>

You have a typo in the second id - missing quote
IDs need to be unique so use instead a class and you can loop over all the first columns
you can use relative addressing via .next and/or .closest to get the other columns
$(function() {
$("#tb .first").each(function() {
const val1 = +$(this).text();
const val2 = +$(this).next().text();
$(this).closest("tr").find(".diff").text(val1 - val2);
})
})
td {
border: 1px solid black;
padding: 3px;
text-align: right;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>1st</th>
<th>2nd</th>
<th>Diff</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td class="first">11</td>
<td class="second">9</td>
<td class="diff"></td>
</tr>
<tr>
<td class="first">12</td>
<td class="second">8</td>
<td class="diff"></td>
</tr>
<tr>
<td class="first">13</td>
<td class="second">7</td>
<td class="diff"></td>
</tr>
<tr>
<td class="first">14</td>
<td class="second">6</td>
<td class="diff"></td>
</tr>
<tr>
<td class="first">15</td>
<td class="second">5</td>
<td class="diff"></td>
</tr>
</tbody>
</table>
Plain JS
window.addEventListener('load', function() {
[...document.querySelectorAll('#tb .first')].forEach(cell => {
const parent = cell.closest('tr');
const val1 = +cell.textContent;
const val2 = +parent.querySelector('.second').textContent;
parent.querySelector('.diff').textContent = val1 - val2;
})
})
td {
border: 1px solid black;
padding: 3px;
text-align: right;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>1st</th>
<th>2nd</th>
<th>Diff</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td class="first">11</td>
<td class="second">9</td>
<td class="diff"></td>
</tr>
<tr>
<td class="first">12</td>
<td class="second">8</td>
<td class="diff"></td>
</tr>
<tr>
<td class="first">13</td>
<td class="second">7</td>
<td class="diff"></td>
</tr>
<tr>
<td class="first">14</td>
<td class="second">6</td>
<td class="diff"></td>
</tr>
<tr>
<td class="first">15</td>
<td class="second">5</td>
<td class="diff"></td>
</tr>
</tbody>
</table>

Javascript using getElementByClassName to change button colour

I am new to javascript and trying to write a javascript code so when a button is clicked its colour will change. I tried different ways but when clicked on the first element works. Not really sure what is going on here. I would appreciate any help.
var count = 1;
function setColor(button, color) {
var property = document.getElementsByClassName("button");
if (count == 0) {
property.style.backgroundColor = "#A94E3B"
count = 1;
}
else {
property.style.backgroundColor = "#EAE8E8"
count = 0;
}
}

this way, with event delegation and classList toggle
const myTable = document.getElementById('my-table')
myTable.onclick = e =>
{
if (!e.target.matches('#my-table button')) return
e.target.classList.toggle('orange')
}
#my-table button {
background-color : yellow;
}
#my-table button.orange {
background-color : orange;
}
table {
border-collapse : collapse;
}
table th,
table td {
padding : .2em .8em;
border : 1px solid darkblue;
text-align : center;
}
table thead {
background-color : #c3e3ee;
}
table td:first-of-type {
width : 8em;
}
<p> Click a button to change its color and click again to reset! </p>
<table id="my-table">
<thead>
<tr> <th colspan="2" >My items:</th> </tr>
</thead>
<tbody>
<tr> <td contenteditable="true">Item 1</td> <td> <button>STATUS</button></td> </tr>
<tr> <td contenteditable="true">Item 2</td> <td> <button>STATUS</button></td> </tr>
<tr> <td contenteditable="true">Item 3</td> <td> <button>STATUS</button></td> </tr>
<tr> <td contenteditable="true">Item 4</td> <td> <button>STATUS</button></td> </tr>
<tr> <td contenteditable="true">Item 5</td> <td> <button>STATUS</button></td> </tr>
</tbody>
</table>

To get the reference to the current button, use the this keyword as a parameter value in the function call added inside your onclick attribute. Then use that reference to change the color.
Example:
var count = 1;
function setColor(e, color) {
e.style.backgroundColor = color;
}
<html>
<head>
<script>
</script>
</head>
<body>
<p> Click a button to change its color and click again to reset! </p>
<table class="table table-bordered table-responsive-md table-striped text-center">
<thead>
<tr>
<th class="text-center">My items:</th>
</tr>
</thead>
<tbody>
<tr>
<td contenteditable="true">Item 1</td>
<td> <input type="button" class="button" value="STATUS" style="color:black" onclick="setColor(this, '#800000')" ;/></td>
</tr>
<tr>
<td contenteditable="true">Item 2</td>
<td> <input type="button" class="button" value="STATUS" style="color:black" onclick="setColor(this, '#800000')" ;/></td>
</tr>
<tr>
<td contenteditable="true">Item 3</td>
<td> <input type="button" class="button" value="STATUS" style="color:black" onclick="setColor(this, '#800000')" ;/></td>
</tr>
<tr class="hide">
<td contenteditable="true">Item 4</td>
<td> <input type="button" class="button" value="STATUS" style="color:black" onclick="setColor(this, '#800000')" ;/></td>
</tr>
<tr>
<td contenteditable="true">Item 5</td>
<td> <input type="button" class="button" value="STATUS" style="color:black" onclick="setColor(this, '#800000')" ;/></td>
</tr>
</tbody>
</table>
</body>
</html>

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

CSS When using overflow the gap still remains

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>

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