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!

How to give additional width to the div inside <tr> tag of a table?

I am trying to implement a table in my page. One of the values is rendering too big which looks odd in table cell. Is there any way I can utilize additional width of another <td> for a particular div (I don't want to use colspan for td). SO to achieve this I need to extend the width of that particular DIV. giving a div a width and display absolute property is a bad idea! What else should I do?
MY html-
<table>
<tr>
<th style="width:105px;">
<strong>Sr NO.</strong>
</th>
<th style="width:65px;">
<strong>Type</strong>
</th>
<th style="width:165px;">
<strong>Classification</strong>
</th>
<th style="width:80px;">
<strong>Book No</strong>
</th>
<th>
<strong>Agency</strong>
</th>
<th>
<strong>Date</strong>
</th>
</tr>
<tr ng-repeat="request in msc.minutesData">
<td>
<div class="minutes-subject-container">
<div class="p-t-xs">
{{request.id}}
</div>
<div class="flex-container">
<div class="minutes-info--subrow-subject" style="width:105px">
<label>subject</label>
<div class="minutes-info--subject">
<span>
{{request.subject}}
</span>
</div>
</div>
</div>
</div>
</td>
<td>
<div class="p-t-xs">
{{request.type}}
</div>
</td>
<td>
<div class="minutes-desc-container">
<div class="p-t-xs">
{{request.classification}}
</div>
<div class="flex-container">
<div class="minutes-info--subrow-desc" style="width:165px">
<label>Description</label>
<div class="minutes-info--descriptiopn">
<span>
{{request.description}}
</span>
</div>
</div>
</div>
</div>
</td>
<td>
<div class="p-t-xs">
{{request.bookNo}}
</div>
</td>
<td>
<div class="p-t-xs">
{{request.agency}}
</div>
</td>
<td style="width:110px;">
<div class="minutes-info">
<div class="minutes-info--firstrow">
<div>
<span class="minutes-spanrow">
{{request.date | date: "EEE, d MMM yyyy"}}</span>
</div>
</div>
<div class="flex-container">
<div class="minutes-info--secondrow">
<span class="link-to" ng-click="msc.geturlData(request)">
<img src="img/Doc-Viewer-icon.svg" title="التقرير">
</span>
</div>
</div>
</div>
</td>
</tr>
</table>
Attaching screenshot of my table view to get more insight of my issue. Could someone help me to get solution approach?

Giving width to a container in pixels is a bad idea. It makes it totally absolute and the width won't adjust in different resolutions. You can use percentage. And for your specific problem, you can use try to calculate the percentage that should be applied based on the content. Then using binding allot the percentage width to the containers.

Unable to add vertical scroll bar in html?

<body ng-app="myApp" ng-controller="myCtrl">
<div ng-show = "dataFromRest" ng-repeat = "x in dataFromRest.posts" >
<div class="tittle" style="width: 25%;">
<a href="" ng-click="showDiv = ! showDiv" style="text-decoration: none;" ># {{x.title}} </a>
# No title
<hr style="color: red">
</a>
</b>
</div>
<div class="text">
<div style="width: 70% ;float:right; background-color: white;">
<div ng-show="showDiv">
<div style="float: right;">
<img id="currentPhoto" src="{{x.thread.main_image}}" onerror="this.src='noimageavailable.png'" width="300px" height="250px" style="float: right;">
</div>
<div style="color: purple;text-align: center;font-size:21px">
{{x.title}}
</div><br>
<div>
{{x.text}}
</div>
<b>
URL:-
</b>
To see in details, click here! <br> <br>
</div>
</div>
</div>
</div>
i am working on news feed module . I have two div's ,in first div (left-side) list of all news title is displayed and on right side div the description and image about that title is shown.But i am not able to add vertical scroll bar on left-side div(title-div),if i apply div then it goes to every particular title only.and second one is when page is load the first title, description will automatically load, so how to do this two things?

Add a wrapper.
The overflow scroll goes to all tittle because the title class is inside ng-repeat and thus is repeated for every individual title.
Add another wrapper div outside ng-repeat and apply overflow scroll to that.
<div class="wrapper">
<div ng-show = "dataFromRest" ng-repeat = "x in dataFromRest.posts" >
<div class="tittle" style="width: 25%;">
<a href="" ng-click="showDiv = ! showDiv" style="text-decoration: none;" ># {{x.title}} </a>
# No title
<hr style="color: red">
</a>
</b>
</div>
<div class="text">
<div style="width: 70% ;float:right; background-color: white;">
<div ng-show="showDiv">
<div style="float: right;">
<img id="currentPhoto" src="{{x.thread.main_image}}" onerror="this.src='noimageavailable.png'" width="300px" height="250px" style="float: right;">
</div>
<div style="color: purple;text-align: center;font-size:21px">
{{x.title}}
</div><br>
<div>
{{x.text}}
</div>
<b>
URL:-
</b>
To see in details, click here! <br> <br>
</div>
</div>
</div>
</div>
</div><!-- .wrapper -->
And add overflow:scroll to wrapper.
.wrapper {
overflow:scroll;
}
Note that this will create scroll for both title and text combined. Since they are in single wrapper. If you want different then, you will have to create two different wrappers with two different ng-repeat.

A Javascript function calling a Java function

I have this code wherein I want it only to run when clicked. However, the problem is that the scriptlet notificationDAO.read() is always running whether or not the button is clicked.
Html:
<div style="word-wrap: break-word;">
<li>
<a onclick="read();">
<span class="message" style="color: gray;">
</span>
<span class="subject">
<span class="time" style="color: gray;">
Mark All as Read
</span>
</span>
</a>
</li>
</div>
Javascript:
function read() {
<%
notificationDAO.read(((User)session.getAttribute("user")).getEmployeeID());
%>
}

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.