We Keep Coding

How can I position my table header on bottom on scroll?

This is my table:
<table class="table tableOnScroll">
<thead class="mobile-head-table">
<tr>
<td class="mobile-header-product-item-0">
<div class="product-item-image hideImage">
<div class="is-size-7 cross-sell-flag px-2 py-1 new-product-flag">
<p>popular</p>
</div>
<figure class="image is-4by5">
<img src="">
</figure>
</div>
<div class="promotion hidePromo">
<p>15% OFF with Mattress Purchase!</p>
</div>
<p class="product-name">Adjustable Memory Foam Pillow</p>
<div class="product-pricing">
<p>From</p>
<p class="price">79</p>
<div class="content is-flex mt-3">
<a href="" class="button is-fullwidth">
SHOP NOW </a>
</div>
</div>
</td>
<td class="mobile-header-product-item-1">
<div class="product-item-image hideImage">
<div class="is-size-7 cross-sell-flag px-2 py-1 on-sale-flag">
<p>BEST SELLER</p>
</div>
<figure class="image is-4by5">
<img src="">
</figure>
</div>
<div class="promotion hidePromo">
<p>15% OFF with Mattress Purchase!</p>
</div>
<p class="product-name">Cooling Gel Memory Foam Pillow</p>
<div class="product-pricing">
<p>From</p>
<p class="price">89</p>
<div class="content is-flex mt-3">
<a href="" class="button is-fullwidth">
SHOP NOW </a>
</div>
</div>
</td>
</tr>
</thead>
<tbody class="mobile-body-table">
<tr class="summary is-flex-touch is-hidden-desktop">
<td class="side-header is-flex">
<div class="header-text">
<h1>Summary</h1></div>
</td>
<td>
<div class="markdown-wrapper">
An ultra-breathable memory foam pillow with a soft, responsive, cooling design. Over 50,000 sold! </div>
</td><td>
<div class="markdown-wrapper">
Enjoy the support and cushioning of memory foam with next-level cooling. </div>
</td></tr>
<tr class="feature is-flex-touch is-hidden-desktop"><td class="side-header is-flex"><div class="header-text"><img src="">Warranty</div><div class="header-summary"><p>Guaranteed worry free sleep with Douglas Pillow</p></div></td><td>
<div class="markdown-wrapper">
<h3>3</h3>
<p>Years</p>
</div>
</td><td>
<div class="markdown-wrapper">
<h3>4</h3>
<p>Years</p>
</div>
</td></tr><tr class="feature is-flex-touch is-hidden-desktop"><td class="side-header is-flex"><div class="header-text"><img src="">Free Shipping & Returns</div><div class="header-summary"><p>Your Douglas Pillow will be delivered free of charge</p></div></td><td>
<div class="markdown-wrapper">
<p><img src=""></p>
<p>Included</p>
</div>
</td><td>
<div class="markdown-wrapper">
<p><img src=""></p>
<p>Included</p>
</div>
</td></tr><tr class="feature is-flex-touch is-hidden-desktop"><td class="side-header is-flex"><div class="header-text"><img src="">Coolness</div></td><td>
<div class="markdown-wrapper">
<p><img src=""></p>
</div>
</td><td>
<div class="markdown-wrapper">
<p><img src=""></p>
<p>Single action graphic</p>
</div>
</td></tr>
</tbody>
<tfoot class="mobile-footer-table">
<tr>
<td class="side-header">
Other Features </td>
<td>
<p>Adjustable Firmness</p>
<p>Supportive</p>
<p>Fit all pillows</p>
<p>Back Sleepers</p>
<p>Side Sleepers</p>
<p>Cooling Technology</p>
<p>Improved Memory Foam</p>
<p>Improved Memory Foam</p>
</td>
</tr>
</tfoot>
</table>
I tried this css
thead {
position: sticky;
bottom: 0;
z-index: 99;
}
and this did not work at all so I tried this instead
thead {
position: fixed;
bottom: 0;
z-index: 99;
}
and it worked but the only problem is that once the content of the table is completed and when the other sections start coming, the position of the thead remain the same which makes sense.
I either want the table header to be sticky on bottom on scroll and disappear as soon as the other content comes up or with the second css code provided, if it's possible to reset the position again as other sections start coming up.
Any help would be appreciated. Thank you!

add js to element:
const header = document.getElementById("headerid");
onScroll() {
header.style.position = "static"
console.log("Changed Position")
}
Add a id of headerid to the header, than set the onScroll attribute of the element to run the function onScroll(), which changes the position to normal. To do the opposite copy the function and change "static" to "fixed" and add the line header.style.bottom = 0;. Hope this fixes your problem!

Refresh tag value with dynamically generated data

I have a main php page displaying dynamically generated cards through a loop. I am trying to refresh the content for certain tags, but it doesn't seem to work so far.
This is my main.php file:
<div class="col" style="width: ">
<div class="card shadow-sm h-100 border-dark rounded" style="width: 240px; background-color: #ededed">
<span class="mySpan">
<div class="container">
<input type="hidden" class="cardid" name="mycardId" value="
<?php echo $cardId ?>" id="cardid">
<div class="card-body px-0 py-0">
<table id="firstTable" class="table table-responsive-md table-striped table-borderless text-center mb-0" style="width: 237px; table-layout: fixed;">
<thead>
<tr>
<th colspan="3" id="row1field1" name="row1field1" class="text-center py-1 px-1 fw-bold
<?php if($selectField == "EXP") echo "text-decoration-line-through" ?>" style="max-width: 237px; text-transform: uppercase; font-size: 18px;" contenteditable="true" data-name="row1field1"> <?php echo $row1field1; ?> </th>
</tr>
</thead>
</table>
<table id="row4" class="table table-responsive-md table-striped table-borderless text-center mb-0" style="max-width: 238px; min-height: 50px; border: thin solid lightgray">
<tr>
<td name="row4field1" id="row4field1" class=" py-1" style="max-width: 104px; border-right: thin solid gray; text-transform: uppercase;" contenteditable="true">
<h6>
<strong> <?php echo $row4field1; ?> </strong>
</h6>
</td>
<td name="row4field2" id="row4field2" class=" py-1" style="max-width: 104px; text-transform: uppercase;" contenteditable="true">
<h6>
<strong> <?php echo $row4field2; ?> </strong>
</h6>
</td>
</tr>
</table>
</div>
<div>
</span>
</div>
</div>
This is what I've tried so far using javascript:
$(document).ready(function(){
setInterval(function(){
$("#row1field1").load(" #row1field1 > *");
}, 5000);
});
Unfortunately, after the refresh, all content from row1field1 is gone. I believe this could be because the IDs are not unique, but I'm using the hidden value cardId to differentiate each card. Any advice on how to properly refresh these dynamic content is greatly appreciated.

Print Receipt Css

I am having an issue that I have installed BIXOLON printer and want to print a receipt through it. Have used java script to print it but printing page size is too large.
inner Html:
<div id="divToPrint" class="invoice p-3 mb-3" style="max-height:100%">
<div class="row">
<div class="col-12">
<h4 style="text-align:center">
<img src="<?php echo base_url()?>assets/dist/img/AdminLTELogo.png" class="img-responsive" style="max-width:100px;margin:0 auto;display:block">
<br>
</h4>
</div>
</div>
<div class="row invoice-info">
<div class="col-sm-4 invoice-col">
</div>
<div class="col-sm-4 invoice-col">
</div>
<div class="col-sm-4 invoice-col">
<b>Invoice #<?php echo date('M Y').'-'.$id?></b><br>
<br>
<b>Payment:</b> <?php $amount?><br>
<b>Duration:</b> <?php echo $duration ?>
</div>
</div>
<div class="row">
<div class="col-12 table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>Qty</th>
<th>Station</th>
<th>Serial</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><?php echo $stationTitle; ?> </td>
<td><?php echo$ id?></td>
<td><?php echo $amount?></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-6">
</div>
<div class="col-6">
<p class="lead">Date <?php echo date('d M Y')?></p>
<div class="table-responsive">
<table class="table">
<tr>
<th style="width:50%">Total:</th>
<td><?php $amount?></td>
</tr>
</table>
</div>
</div>
</div>
</div>
Here is my java script code:
function PrintDiv() {
var divToPrint = document.getElementById('divToPrint');
var popupWin = window.open('', '_blank', 'width=400,height=300');
popupWin.document.open();
popupWin.document.write('<html><body style="width: 58mm " onload="window.print()">' + divToPrint.innerHTML + '</html>');
popupWin.document.close();
}
Have attached an image with it too. Want to print a short receipt to limited height.
Thank You.

It's hard to tell, bcs you haven't provide the inner div html and styles.
However, try this:
<body style="width: 58mm; height: 120mm; overflow: hidden;" onload="window.print()">

angular print printing a second blank page

I'm trying to print an content of my html page.
I'm using this angularPrint but the problem im having is that in the page preview i'm getting to pages. the first one has content and the second one is a blank page. I'm trying to get rid of the blank page.
this is my html
<div id="invoice" print-section="" print-only="">
<div class="invoice">
<div class="invoice-company">{{user.store.name}}</div>
<div class="invoice-header">
<div class="invoice-from"><small>from</small>
<address class="m-t-5 m-b-5"><strong>{{user.store.name}}.</strong><br/>{{user.store.address.street}}<br/>{{user.store.address.city}}, {{user.store.address.zipCode}}<br/>Phone: {{user.store.phone}}</address>
</div>
<div class="invoice-date">
<div class="date m-t-5">{{saleDate | date:'MM/dd/yyyy'}}</div>
<div class="invoice-detail"># {{saleId}}<br/>Cashier {{user.firstName}}</div>
</div>
</div>
<div class="invoice-content">
<div class="table-responsive">
<table class="table table-invoice">
<thead>
<tr>
<th>Item</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in sale.items">
<td>{{item.name}} {{item.size}}</td>
<td>{{item.price | currency}}</td>
</tr>
<tr ng-repeat="discount in sale.discounts">
<td>{{discount.name}}</td>
<td>- {{discount.price | currency}}</td>
</tr>
</tbody>
</table>
</div>
<div class="invoice-price">
<div class="invoice-price-left">
<div class="invoice-price-row">
<div class="sub-price"><small>SUBTOTAL</small>{{sale.subtotal | currency}}</div>
<div class="sub-price"><i class="fa fa-plus"></i></div>
<div class="sub-price"><small>TAX</small>{{sale.tax}}</div>
</div>
</div>
<div class="invoice-price-right"><small>TOTAL</small>{{sale.total | currency}}</div>
</div>
</div>
<div class="invoice-footer text-muted">
<p class="text-center m-b-5">Thank you for coming.<br/>We hope you'll visit again.</p>
</div>
</div>
</div>
this is the directive that trigger the print action
<button type="button" print-btn="">Print</button>
I want a solution it doesn't matter if I have to use plain javascript/jQuery or no directive at all. I just to be able to populate an invoice and print it.
Thank you in advance.

you could add
#invoice:last-child {
page-break-after: auto;
}
to remove the last page
Note: Not supported in IE

Divs moving when they shouldn't

I creating a web page and I placed divs in certain positions. However my problem is I've got a league table to the right and some divs to the left. If i change the box to the left of the table like say for example its height or data inside then the table will move upwards. Which I don't want. I don't want the table to move at all I want it to stay in the same position and height even if I adjust the boxes to the left
<div class="wrap">
<div id="boxInj">
<h1 class="headinj">Injuries</h1>
<p id="arsWriting">
- M. Arteta (Doubt) <br>
- M. Debuchy (Doubt) <br>
- A. Oxlade-Chamberlain (Doubt)
</p>
</div>
<div id="boxSus">
<h1 class="headinj" >Suspensions</h1>
<p id="arsWriting" >
- None
</p>
</div>
</div>
<div id="box">
<h1 id="headinj">Player Statistics (All Competitions)</h1>
<div id ="w"> <p id="arsWriting" class="sepStats"> <b>Top GoalScorers:</b> A. Sanchez (23) | O. Giroud (18) | A. Ramsey (10) | S. Cazorla (8) | D. Welbeck (8) </p> </div>
<div id ="e" > </div>
<div id ="u" >
</div>
<div id ="u" >
</div>
</div>
<div class="Newsbox">
<h1 id="headnews">NewsPaper Articles</h1>
<p id="arsWriting"> Currently Unavailble
</p>
</div>
<div id="sidebar">
<div class="box">
<table class="grid" cellspacing="0" cellpadding="0">
<caption>Premier League 14-15</caption>
<tbody><tr class="title"><td id="TeamNum">#</td><td id="TeamLength" colspan="1">Team</td><td class="stats" >P</td><td class="stats">W</td><td class="stats">D</td><td class="stats">L</td><td class="stats" class="Gdiff">GF</td><td class="stats" class="Gdiff">GA</td> <td class="stats" class="Gdiff">GD</td><td class="stats">Pts</td></tr>
<tr class="champion"><td>1.</td><td style="text-align: left;"><a id="h" href="Chelsea.html"><b>Chelsea</b></a></td><td>37</td><td>25</td><td>9</td><td>3</td><td>70</td><td>31</td><td>39</td><td class="bold">84</td></tr>
<tr class="league_champions"><td>2.</td><td style="text-align: left;"><b> Man City</b></td><td>37</td><td>23</td><td>7</td><td>7</td><td>81</td><td>38</td><td>43</td><td class="bold">76</td></tr>
<tr class="league_champions ArsStand"><td>3.</td><td style="text-align: left;" ><b>Arsenal</b></td><td>37</td><td>21</td><td>7</td><td>7</td><td>67</td><td>35</td><td>32</td><td class="bold">72</td></tr>
<tr class="league_champions ArsStand"><td>4.</td><td style="text-align: left;"><b>Man Utd</b></td><td>37</td><td>20</td><td>9</td><td>8</td><td>62</td><td>37</td><td>25</td><td class="bold">69</td></tr>
<tr class="league_europa"><td>5.</td><td style="text-align: left;"><b>Liverpool</b></td><td>37</td><td>18</td><td>8</td><td>11</td><td>51</td><td>42</td><td>9</td><td class="bold">62</td></tr>
<tr><td>6.</td><td style="text-align: left;"><b>Spurs</b></td><td>37</td><td>18</td><td>7</td><td>12</td><td>57</td><td>53</td><td>4</td><td class="bold">61</td></tr>
<tr><td>7.</td><td style="text-align: left;"><b>Southampton</b></td><td>37</td><td>18</td><td>6</td><td>13</td><td>54</td><td>31</td><td>23</td><td class="bold">60</td></tr>
<tr><td>8.</td><td style="text-align: left;"><b>Swansea</b></td><td>37</td><td>16</td><td>8</td><td>13</td><td>46</td><td>48</td><td>-2</td><td class="bold">56</td></tr>
<tr><td>9.</td><td style="text-align: left;"><b>Stoke</b></td><td>37</td><td>14</td><td>9</td><td>14</td><td>42</td><td>44</td><td>-2</td><td class="bold">51</td></tr>
<tr><td>10.</td><td style="text-align: left;"><b>Everton</b></td><td>37</td><td>12</td><td>11</td><td>14</td><td>48</td><td>49</td><td>-1</td><td class="bold">47</td></tr>
<tr><td>11.</td><td style="text-align: left;"><b>West Ham</b></td><td>37</td><td>12</td><td>11</td><td>14</td><td>44</td><td>45</td><td>-1</td><td class="bold">47</td></tr>
<tr><td>12.</td><td style="text-align: left;"><b>C Palace</b></td><td>37</td><td>12</td><td>9</td><td>16</td><td>46</td><td>51</td><td>-5</td><td class="bold">45</td></tr>
<tr><td>13.</td><td style="text-align: left;"><b>West Brom</b></td><td>37</td><td>11</td><td>11</td><td>15</td><td>37</td><td>47</td><td>-10</td><td class="bold">44</td></tr>
<tr class="dropout"><td>14.</td><td style="text-align: left;"><b>Leicester City</b></td><td>37</td><td>10</td><td>8</td><td>19</td><td>41</td><td>54</td><td>-13</td><td class="bold">38</td></tr>
<tr><td>15.</td><td style="text-align: left;"><b>Sunderland</b></td><td>37</td><td>7</td><td>17</td><td>13</td><td>30</td><td>50</td><td>-20</td><td class="bold">38</td></tr>
<tr><td>16.</td><td style="text-align: left;"><b>Aston Villa</b></td><td>37</td><td>10</td><td>8</td><td>19</td><td>31</td><td>56</td><td>-25</td><td class="bold">38</td></tr>
<tr><td>17.</td><td style="text-align: left;"><b>Newcastle</b></td><td>37</td><td>9</td><td>9</td><td>19</td><td>38</td><td>63</td><td>-25</td><td class="bold">36</td></tr>
<tr><td>18.</td><td style="text-align: left;"><b>Hull City</b></td><td>37</td><td>8</td><td>10</td><td>19</td><td>33</td><td>51</td><td>-18</td><td class="bold">34</td></tr>
<tr class="dropout"><td>19.</td><td style="text-align: left;"><b>Burnley</b></td><td>37</td><td>6</td><td>12</td><td>19</td><td>27</td><td>53</td><td>-26</td><td class="bold">30</td></tr>
<tr class="dropout"><td>20.</td><td style="text-align: left;"><b>QPR</b></td><td>37</td><td>8</td><td>6</td><td>23</td><td>41</td><td>68</td><td>-27</td><td class="bold">30</td></tr>
</tbody></table>
</div>
</div>
Heres my code https://jsfiddle.net/dtdkpfah/ which show that the table is not staying in one positon it moves if I change one box around it.