i work in rails, i have a table and want to add horizontal and vertical scroll with fixed header, detail like that :
table have fixed width and high
table can horizontal and vertical scroll
headers are the first row, the last row and the first column
always see these headers above
when horizontal scroll, only the first column fixed
when vertical scroll, the first row and the last row fixed
This is my currenty code :
body {
font:16px Calibri;
}
table {
border-collapse:separate;
border-top: 3px solid orange;
}
td {
margin:0;
border:1px solid grey;
border-top-width:0px;
white-space:nowrap;
}
div.second {
width: 600px;
overflow-x:scroll;
overflow-y:visible;
margin-left:5em;
padding-bottom:1px;
height: auto;
}
div.first {
width: auto;
overflow-y: scroll;
overflow-x: hidden;
height: 150px;
padding-bottom: 1px;
position: absolute;
left:0;
top:auto;
}
.headcol {
position: absolute;
width:5em;
left:0;
top:auto;
border-right: 0px none black;
border-top-width:3px; /*only relevant for first row*/
margin-top:-3px; /*compensate for top border*/
background:grey;
}
.headrow {
position: absolute;
width:100px;
left: 5em;
}
.long {
background:yellow;
}
<div id="scroll-table">
<div class="first">
<div class="second">
<table>
<thead>
<tr>
<td class="headcol">1 - 1</td>
<div class="headrow">
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
<td>C5</td>
<td>C6</td>
<td>C7</td>
<td>C8</td>
</div>
</tr>
</thead>
<tbody>
<tr>
<td class="headcol">1</td>
<div class="row-content">
<td class="long">QWERTYUI</td>
<td class="long">OPASDFGH</td>
<td class="long">TYUIOPAS</td>
<td class="long">UIOPASDF</td>
<td class="long">QWERTYUI</td>
<td class="long">OPASDFGH</td>
<td class="long">TYUIOPAS</td>
<td class="long">UIOPASDF</td>
</div>
</tr>
<tr>
<td class="headcol">1</td>
<div class="row-content">
<td class="long">TYUIOPAS</td>
<td class="long">WERTYUOP</td>
<td class="long">QWEIOPAS</td>
<td class="long">QWEFGHJK</td>
<td class="long">QWERTYUI</td>
<td class="long">OPASDFGH</td>
<td class="long">TYUIOPAS</td>
<td class="long">UIOPASDF</td>
</div>
</tr>
<tr>
<td class="headcol">1</td>
<div class="row-content">
<td class="long">TYUIOPAS</td>
<td class="long">WERTYUOP</td>
<td class="long">QWEIOPAS</td>
<td class="long">QWEFGHJK</td>
<td class="long">QWERTYUI</td>
<td class="long">OPASDFGH</td>
<td class="long">TYUIOPAS</td>
<td class="long">UIOPASDF</td>
</div>
</tr>
<tr>
<td class="headcol">1</td>
<div class="row-content">
<td class="long">TYUIOPAS</td>
<td class="long">WERTYUOP</td>
<td class="long">QWEIOPAS</td>
<td class="long">QWEFGHJK</td>
<td class="long">QWERTYUI</td>
<td class="long">OPASDFGH</td>
<td class="long">TYUIOPAS</td>
<td class="long">UIOPASDF</td>
</div>
</tr><tr>
<td class="headcol">1</td>
<div class="row-content">
<td class="long">TYUIOPAS</td>
<td class="long">WERTYUOP</td>
<td class="long">QWEIOPAS</td>
<td class="long">QWEFGHJK</td>
<td class="long">QWERTYUI</td>
<td class="long">OPASDFGH</td>
<td class="long">TYUIOPAS</td>
<td class="long">UIOPASDF</td>
</div>
</tr>
<tr>
<td class="headcol">1</td>
<div class="row-content">
<td class="long">TYUIOPAS</td>
<td class="long">WERTYUOP</td>
<td class="long">QWEIOPAS</td>
<td class="long">QWEFGHJK</td>
<td class="long">QWERTYUI</td>
<td class="long">OPASDFGH</td>
<td class="long">TYUIOPAS</td>
<td class="long">UIOPASDF</td>
</div>
</tr><tr>
<td class="headcol">1</td>
<div class="row-content">
<td class="long">TYUIOPAS</td>
<td class="long">WERTYUOP</td>
<td class="long">QWEIOPAS</td>
<td class="long">QWEFGHJK</td>
<td class="long">QWERTYUI</td>
<td class="long">OPASDFGH</td>
<td class="long">TYUIOPAS</td>
<td class="long">UIOPASDF</td>
</div>
</tr>
<tr>
<td class="headcol">1</td>
<div class="row-content">
<td class="long">TYUIOPAS</td>
<td class="long">WERTYUOP</td>
<td class="long">QWEIOPAS</td>
<td class="long">QWEFGHJK</td>
<td class="long">QWERTYUI</td>
<td class="long">OPASDFGH</td>
<td class="long">TYUIOPAS</td>
<td class="long">UIOPASDF</td>
</div>
</tr><tr>
<td class="headcol">1</td>
<div class="row-content">
<td class="long">TYUIOPAS</td>
<td class="long">WERTYUOP</td>
<td class="long">QWEIOPAS</td>
<td class="long">QWEFGHJK</td>
<td class="long">QWERTYUI</td>
<td class="long">OPASDFGH</td>
<td class="long">TYUIOPAS</td>
<td class="long">UIOPASDF</td>
</div>
</tr>
<tr>
<td class="headcol">1</td>
<div class="row-content">
<td class="long">TYUIOPAS</td>
<td class="long">WERTYUOP</td>
<td class="long">QWEIOPAS</td>
<td class="long">QWEFGHJK</td>
<td class="long">QWERTYUI</td>
<td class="long">OPASDFGH</td>
<td class="long">TYUIOPAS</td>
<td class="long">UIOPASDF</td>
</div>
</tr>
</tbody>
</table>
</div>
</div>
</div>
I think to need to use javascript
Can you help me about it ?
Thanks
Related
I have a simple table with some data and i want to scroll to a specific position based on date & highlight that row and based on the which day of Ramadan it is.
Let us say its 13 Ramadan which would be on 25-04-2021 then i have to scroll to that position and highlight the row in RED or any other color.
So far i am finding text and changing the color and i am doing same for scroll but scroll is not working not sure where i am doing it wrong..
This page feature is specially required for mobile version so that user is scroll to the right position on page etc
https://codepen.io/KGuide/pen/jOyLWNR
//$(window).scrollTop($("*:contains('05-05-2021'):last").offset().top);
//$(window).scrollTop($("*:contains('25-04-2021')").offset().top);
$(window).scrollTop($("*:contains('25-04-2021')"));
$("tr:contains('25-04-2021')" ).css( "color", "red" );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table-w ">
<table class="ramadan-table">
<thead>
<tr>
<th scope="col">Date</th>
<th scope="col">Day</th>
<th scope="col">Ramadan</th>
</tr>
</thead>
<tbody>
<tr>
<td class="Date" data-label="Date">13-04-2021</td>
<td data-label="Day">Tuesday</td>
<td data-label="Ramadan">1</td>
</tr>
<tr>
<td class="Date" data-label="Date">14-04-2021</td>
<td data-label="Day">Wednesday</td>
<td data-label="Ramadan">2</td>
</tr>
<tr>
<td class="Date" data-label="Date">15-04-2021</td>
<td data-label="Day">Thursday</td>
<td data-label="Ramadan">3</td>
</tr>
<tr>
<td class="Date" data-label="Date">16-04-2021</td>
<td data-label="Day">Friday</td>
<td data-label="Ramadan">4</td>
</tr>
<tr>
<td class="Date" data-label="Date">17-04-2021</td>
<td data-label="Day">Saturday</td>
<td data-label="Ramadan">5</td>
</tr>
<tr>
<td class="Date" data-label="Date">18-04-2021</td>
<td data-label="Day">Sunday</td>
<td data-label="Ramadan">6</td>
</tr>
<tr>
<td class="Date" data-label="Date">19-04-2021</td>
<td data-label="Day">Monday</td>
<td data-label="Ramadan">7</td>
</tr>
<tr>
<td class="Date" data-label="Date">20-04-2021</td>
<td data-label="Day">Tuesday</td>
<td data-label="Ramadan">8</td>
</tr>
<tr>
<td class="Date" data-label="Date">21-04-2021</td>
<td data-label="Day">Wednesday</td>
<td data-label="Ramadan">9</td>
</tr>
<tr>
<td class="Date" data-label="Date">22-04-2021</td>
<td data-label="Day">Thursday</td>
<td data-label="Ramadan">10</td>
</tr>
<tr>
<td class="Date" data-label="Date">23-04-2021</td>
<td data-label="Day">Friday</td>
<td data-label="Ramadan">11</td>
</tr>
<tr>
<td class="Date" data-label="Date">24-04-2021</td>
<td data-label="Day">Saturday</td>
<td data-label="Ramadan">12</td>
</tr>
<tr>
<td class="Date" data-label="Date">25-04-2021</td>
<td data-label="Day">Sunday</td>
<td data-label="Ramadan">13</td>
</tr>
<tr>
<td class="Date" data-label="Date">26-04-2021</td>
<td data-label="Day">Monday</td>
<td data-label="Ramadan">14</td>
</tr>
<tr>
<td class="Date" data-label="Date">27-04-2021</td>
<td data-label="Day">Tuesday</td>
<td data-label="Ramadan">15</td>
</tr>
<tr>
<td class="Date" data-label="Date">28-04-2021</td>
<td data-label="Day">Wednesday</td>
<td data-label="Ramadan">16</td>
</tr>
<tr>
<td class="Date" data-label="Date">29-04-2021</td>
<td data-label="Day">Thursday</td>
<td data-label="Ramadan">17</td>
</tr>
<tr>
<td class="Date" data-label="Date">30-04-2021</td>
<td data-label="Day">Friday</td>
<td data-label="Ramadan">18</td>
</tr>
<tr>
<td class="Date" data-label="Date">01-05-2021</td>
<td data-label="Day">Saturday</td>
<td data-label="Ramadan">19</td>
</tr>
<tr>
<td class="Date" data-label="Date">02-05-2021</td>
<td data-label="Day">Sunday</td>
<td data-label="Ramadan">20</td>
</tr>
<tr>
<td class="Date" data-label="Date">03-05-2021</td>
<td data-label="Day">Monday</td>
<td data-label="Ramadan">21</td>
</tr>
<tr>
<td class="Date" data-label="Date">04-05-2021</td>
<td data-label="Day">Tuesday</td>
<td data-label="Ramadan">22</td>
</tr>
<tr>
<td class="Date" data-label="Date">05-05-2021</td>
<td data-label="Day">Wednesday</td>
<td data-label="Ramadan">23</td>
</tr>
<tr>
<td class="Date" data-label="Date">06-05-2021</td>
<td data-label="Day">Thursday</td>
<td data-label="Ramadan">24</td>
</tr>
<tr>
<td class="Date" data-label="Date">07-05-2021</td>
<td data-label="Day">Friday</td>
<td data-label="Ramadan">25</td>
</tr>
<tr>
<td class="Date" data-label="Date">08-05-2021</td>
<td data-label="Day">Saturday</td>
<td data-label="Ramadan">26</td>
</tr>
<tr>
<td class="Date" data-label="Date">09-05-2021</td>
<td data-label="Day">Sunday</td>
<td data-label="Ramadan">27</td>
</tr>
<tr>
<td class="Date" data-label="Date">10-05-2021</td>
<td data-label="Day">Monday</td>
<td data-label="Ramadan">28</td>
</tr>
<tr>
<td class="Date" data-label="Date">11-05-2021</td>
<td data-label="Day">Tuesday</td>
<td data-label="Ramadan">29</td>
</tr>
<tr>
<td class="Date" data-label="Date">12-05-2021</td>
<td data-label="Day">Wednesday</td>
<td data-label="Ramadan">30</td>
</tr>
</tbody>
</table>
</div>
Use $(window).scrollTop($("*:contains('25-04-2021')").parent('tr').offset().top);
Jquery scroll needs the offset of html tag.
Demo: https://jsfiddle.net/qtkwr7ny/
Can someone please advise me how i go about making the header and footer of my code fixed based on the screen size, and the middle is scrollable. I see some stuff discussing this but no real explanation. I am very much new to coding, hence its a trial error for me. just my fun project keeps me going.
<div class="container-fluid">
<div class="table-responsive">
<table class="table table-striped table-sm table-hover">
<thead>
<tr>
<th nowrap="nowrap" class=" text-center">tes1#</th>
<th nowrap="nowrap" class=" text-center">col2</th>
<th nowrap="nowrap" class=" text-center">col3</th>
<th nowrap="nowrap" class=" text-center">col4</th>
<th nowrap="nowrap" class=" text-center">col6</th>
<th nowrap="nowrap" class=" text-center">col7</th>
<th nowrap="nowrap" class=" text-center">col8</th>
</tr>
</thead>
<tbody>
<!------Item 1-------->
<tr>
<td nowrap="nowrap" class=" text-left">1,001</td>
<td nowrap="nowrap" class=" text-left">Apple</td>
<td nowrap="nowrap" class=" text-left">Fruits</td>
<td nowrap="nowrap" class=" text-left">Red Apple</td>
<td nowrap="nowrap" class=" text-left">Large</td>
<td nowrap="nowrap" class=" text-left">n/a</td>
<td nowrap="nowrap" class=" text-center">Each</td>
</tr>
<!---------Item 2----------->
<tr>
<td nowrap="nowrap" class=" text-left">1,001</td>
<td nowrap="nowrap" class=" text-left">Apple</td>
<td nowrap="nowrap" class=" text-left">Fruits</td>
<td nowrap="nowrap" class=" text-left">Red Apple</td>
<td nowrap="nowrap" class=" text-left">Large</td>
<td nowrap="nowrap" class=" text-left">n/a</td>
<td nowrap="nowrap" class=" text-center">Each</td>
</tr>
<!---------Item 2----------->
<tr>
<td nowrap="nowrap" class=" text-left">1,001</td>
<td nowrap="nowrap" class=" text-left">Apple</td>
<td nowrap="nowrap" class=" text-left">Fruits</td>
<td nowrap="nowrap" class=" text-left">Red Apple</td>
<td nowrap="nowrap" class=" text-left">Large</td>
<td nowrap="nowrap" class=" text-left">n/a</td>
<td nowrap="nowrap" class=" text-center">Each</td>
</tr>
<!---------Item 3----------->
<tr>
<td nowrap="nowrap" class=" text-left">1,001</td>
<td nowrap="nowrap" class=" text-left">Apple</td>
<td nowrap="nowrap" class=" text-left">Fruits</td>
<td nowrap="nowrap" class=" text-left">Red Apple</td>
<td nowrap="nowrap" class=" text-left">Large</td>
<td nowrap="nowrap" class=" text-left">n/a</td>
<td nowrap="nowrap" class=" text-center">Each</td>
</tr>
using positions attribute will help you for the table head you need to make its position sticky in the first row in the table and set its top to zero so that will be always in the top of the page
here is my and #tao attempt :
HTML :
<div class="container-fluid">
<div class="table-responsive">
<table class="table table-striped table-sm table-hover">
<thead>
<tr>
<th nowrap="nowrap" class=" text-center">tes1#</th>
<th nowrap="nowrap" class=" text-center">col2</th>
<th nowrap="nowrap" class=" text-center">col3</th>
<th nowrap="nowrap" class=" text-center">col4</th>
<th nowrap="nowrap" class=" text-center">col6</th>
<th nowrap="nowrap" class=" text-center">col7</th>
<th nowrap="nowrap" class=" text-center">col8</th>
</tr>
</thead>
<tbody>
<!------Item 1-------->
<tr>
<td nowrap="nowrap" class=" text-left">1,001</td>
<td nowrap="nowrap" class=" text-left">Apple</td>
<td nowrap="nowrap" class=" text-left">Fruits</td>
<td nowrap="nowrap" class=" text-left">Red Apple</td>
<td nowrap="nowrap" class=" text-left">Large</td>
<td nowrap="nowrap" class=" text-left">n/a</td>
<td nowrap="nowrap" class=" text-center">Each</td>
</tr>
<!---------Item 2----------->
<tr>
<td nowrap="nowrap" class=" text-left">1,001</td>
<td nowrap="nowrap" class=" text-left">Apple</td>
<td nowrap="nowrap" class=" text-left">Fruits</td>
<td nowrap="nowrap" class=" text-left">Red Apple</td>
<td nowrap="nowrap" class=" text-left">Large</td>
<td nowrap="nowrap" class=" text-left">n/a</td>
<td nowrap="nowrap" class=" text-center">Each</td>
</tr>
<!---------Item 2----------->
<tr>
<td nowrap="nowrap" class=" text-left">1,001</td>
<td nowrap="nowrap" class=" text-left">Apple</td>
<td nowrap="nowrap" class=" text-left">Fruits</td>
<td nowrap="nowrap" class=" text-left">Red Apple</td>
<td nowrap="nowrap" class=" text-left">Large</td>
<td nowrap="nowrap" class=" text-left">n/a</td>
<td nowrap="nowrap" class=" text-center">Each</td>
</tr>
<!---------Item 3----------->
<tr>
<td nowrap="nowrap" class=" text-left">1,001</td>
<td nowrap="nowrap" class=" text-left">Apple</td>
<td nowrap="nowrap" class=" text-left">Fruits</td>
<td nowrap="nowrap" class=" text-left">Red Apple</td>
<td nowrap="nowrap" class=" text-left">Large</td>
<td nowrap="nowrap" class=" text-left">n/a</td>
<td nowrap="nowrap" class=" text-center">Each</td>
</tr>
<footer class="footer">300 result</footer>
CSS :
body {
margin: 0;
padding: 0;
max-height: 100vh;
min-height: 100vh;
display: flex;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
.table-responsive {
max-height: calc(100vh - 60px);
padding: 0 15px;
}
footer {
flex: 0 0 auto;
padding: 1rem;
background-color: #eee;
border-top: 1px solid #ddd;
}
thead th {
position: sticky;
background-color: white;
top: 0;
}
A minor improvement over the presented solution:
body {
max-height: 100vh;
min-height: 100vh;
display: grid;
grid-template-rows: 1fr auto;
}
.table-responsive.table-responsive {
overflow-y: auto;
/* fix pesky sticky header 1px gap */
margin-top: -1px;
}
/* sticky header */
thead th {
position: sticky;
top: 0;
/* optional styling, ignore */
background-color: white;
text-align: left;
}
/* optional styling, ignore */
footer {
padding: 1rem 0;
background-color: #eee;
box-shadow: 0 -1px 8px 0 rgba(0, 0, 0, 0.1), 0 -3px 4px 0 rgba(0, 0, 0, 0.07), 0 -3px 3px -2px rgba(0, 0, 0, 0.06);
border-top: 1px solid white;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<main>
<div class="container-fluid h-100 position-relative">
<div class="h-100 row position-absolute w-100">
<div class="col h-100 pr-0">
<div class="table-responsive h-100 pr-3">
<table class="table table-striped table-sm table-hover header-fixed">
<thead>
<tr>
<th nowrap="nowrap">tes1#</th>
<th nowrap="nowrap">col2</th>
<th nowrap="nowrap">col3</th>
<th nowrap="nowrap">col4</th>
<th nowrap="nowrap">col6</th>
<th nowrap="nowrap">col7</th>
<th nowrap="nowrap" class=" text-center">col8</th>
</tr>
</thead>
<tbody>
<tr>
<td nowrap="nowrap">1,001</td>
<td nowrap="nowrap">Apple</td>
<td nowrap="nowrap">Fruits</td>
<td nowrap="nowrap">Red Apple</td>
<td nowrap="nowrap">Large</td>
<td nowrap="nowrap">n/a</td>
<td nowrap="nowrap" class="text-center">Each</td>
</tr>
<tr>
<td nowrap="nowrap">1,001</td>
<td nowrap="nowrap">Apple</td>
<td nowrap="nowrap">Fruits</td>
<td nowrap="nowrap">Red Apple</td>
<td nowrap="nowrap">Large</td>
<td nowrap="nowrap">n/a</td>
<td nowrap="nowrap" class="text-center">Each</td>
</tr>
<tr>
<td nowrap="nowrap">1,001</td>
<td nowrap="nowrap">Apple</td>
<td nowrap="nowrap">Fruits</td>
<td nowrap="nowrap">Red Apple</td>
<td nowrap="nowrap">Large</td>
<td nowrap="nowrap">n/a</td>
<td nowrap="nowrap" class="text-center">Each</td>
</tr>
<tr>
<td nowrap="nowrap">1,001</td>
<td nowrap="nowrap">Apple</td>
<td nowrap="nowrap">Fruits</td>
<td nowrap="nowrap">Red Apple</td>
<td nowrap="nowrap">Large</td>
<td nowrap="nowrap">n/a</td>
<td nowrap="nowrap" class="text-center">Each</td>
</tr>
<tr>
<td nowrap="nowrap">1,001</td>
<td nowrap="nowrap">Apple</td>
<td nowrap="nowrap">Fruits</td>
<td nowrap="nowrap">Red Apple</td>
<td nowrap="nowrap">Large</td>
<td nowrap="nowrap">n/a</td>
<td nowrap="nowrap" class="text-center">Each</td>
</tr>
<tr>
<td nowrap="nowrap">1,001</td>
<td nowrap="nowrap">Apple</td>
<td nowrap="nowrap">Fruits</td>
<td nowrap="nowrap">Red Apple</td>
<td nowrap="nowrap">Large</td>
<td nowrap="nowrap">n/a</td>
<td nowrap="nowrap" class="text-center">Each</td>
</tr>
<tr>
<td nowrap="nowrap">1,001</td>
<td nowrap="nowrap">Apple</td>
<td nowrap="nowrap">Fruits</td>
<td nowrap="nowrap">Red Apple</td>
<td nowrap="nowrap">Large</td>
<td nowrap="nowrap">n/a</td>
<td nowrap="nowrap" class="text-center">Each</td>
</tr>
<tr>
<td nowrap="nowrap">1,001</td>
<td nowrap="nowrap">Apple</td>
<td nowrap="nowrap">Fruits</td>
<td nowrap="nowrap">Red Apple</td>
<td nowrap="nowrap">Large</td>
<td nowrap="nowrap">n/a</td>
<td nowrap="nowrap" class="text-center">Each</td>
</tr>
<tr>
<td nowrap="nowrap">1,001</td>
<td nowrap="nowrap">Apple</td>
<td nowrap="nowrap">Fruits</td>
<td nowrap="nowrap">Red Apple</td>
<td nowrap="nowrap">Large</td>
<td nowrap="nowrap">n/a</td>
<td nowrap="nowrap" class="text-center">Each</td>
</tr>
<tr>
<td nowrap="nowrap">1,001</td>
<td nowrap="nowrap">Apple</td>
<td nowrap="nowrap">Fruits</td>
<td nowrap="nowrap">Red Apple</td>
<td nowrap="nowrap">Large</td>
<td nowrap="nowrap">n/a</td>
<td nowrap="nowrap" class="text-center">Each</td>
</tr>
<tr>
<td nowrap="nowrap">1,001</td>
<td nowrap="nowrap">Apple</td>
<td nowrap="nowrap">Fruits</td>
<td nowrap="nowrap">Red Apple</td>
<td nowrap="nowrap">Large</td>
<td nowrap="nowrap">n/a</td>
<td nowrap="nowrap" class="text-center">Each</td>
</tr>
<tr>
<td nowrap="nowrap">1,001</td>
<td nowrap="nowrap">Apple</td>
<td nowrap="nowrap">Fruits</td>
<td nowrap="nowrap">Red Apple</td>
<td nowrap="nowrap">Large</td>
<td nowrap="nowrap">n/a</td>
<td nowrap="nowrap" class="text-center">Each</td>
</tr>
<tr>
<td nowrap="nowrap">1,001</td>
<td nowrap="nowrap">Apple</td>
<td nowrap="nowrap">Fruits</td>
<td nowrap="nowrap">Red Apple</td>
<td nowrap="nowrap">Large</td>
<td nowrap="nowrap">n/a</td>
<td nowrap="nowrap" class=" text-center">Each</td>
</tr>
<tr>
<td nowrap="nowrap">1,001</td>
<td nowrap="nowrap">Apple</td>
<td nowrap="nowrap">Fruits</td>
<td nowrap="nowrap">Red Apple</td>
<td nowrap="nowrap">Large</td>
<td nowrap="nowrap">n/a</td>
<td nowrap="nowrap" class=" text-center">Each</td>
</tr>
<tr>
<td nowrap="nowrap">1,001</td>
<td nowrap="nowrap">Apple</td>
<td nowrap="nowrap">Fruits</td>
<td nowrap="nowrap">Red Apple</td>
<td nowrap="nowrap">Large</td>
<td nowrap="nowrap">n/a</td>
<td nowrap="nowrap" class=" text-center">Each</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</main>
<footer class="container-fluid">
<div class="row">
<div class="col">
<div contenteditable=true>
<h4>Change footer height (click to edit)</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
</footer>
It uses display:grid instead of flexbox to position the footer at the bottom of the viewport which basically means it does not require hard-coding footer height into the scroller's max-height.
Click to edit footer contents and watch table scroller updating accordingly.
I'm using following script for Fixed my menu when Scroll the page.
var num = 5;
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
$('.scroll').css({'position':'fixed', 'top':'0px'});
} else {
$('.scroll').css({'position':'', 'top':''});
}
});
I'm using this script for table. See Jsfiddle.
When Scroll Down, that title is going contraction to left left side.
Why It's happening and How I can fix?
It should support major browsers(not IE).
When you set position: fixed the left prop seems to be set to 0. Hence, the headers were moving to the left corner. You may have to play with display and width props to do what you're after. Also note that adding/removing a class is better than setting inline styles via .css(). Look at the following demo and adapt the code accordingly to suit your needs.
var num = 5;
$(document).bind('scroll', function () {
if ($(document).scrollTop() > num) {
$('.scroll').addClass("scrolled");
} else {
$('.scroll').removeClass("scrolled");
}
});
.scroll { width: 100%; }
.scroll th { width: 49% }
.scrolled { position: fixed; top: 0; }
.scrolled th { display: inline-block; width: 47.5% }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable" width="100%">
<thead>
<tr class="scroll">
<th>Id</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
</tbody>
</table>
There may be other ways of doing it, but this is what I could quickly think of :)
I have a next problem:
I have a table with charts inside and tables, it is well displayed in the browsers. But when I try to print it(I need to print it to pdf) in mozila 3rd speedometr is being cut so it displays only 2.5 speedometrs.
Option "shrink to fit" doesn't help, if scale is 100% I have the problem, if I put 70% or less-I can see all 3 speedometrs, but the other text is too small. Other tables and content render perfectly depending on scale. Is there any way to solve this problem? This is about FireFox browser- I need exactly him, but I've tried in Chrome too-there he just uses autoscale but still it makes about 70% sacle.
So is there any way to scale charts while printing? Setting exact px size of chart would be bad idea for my problem.
Here is the link to speedometrs table of charts
I think the problem is that JS is runned only once when it's drawing the page and after that it isn't scaling.
The css file:
.container
{
width:33%;
border:0px solid black;
}
.speedometr
{
width:80%;
margin-left: auto;
margin-right: auto;
}
And the html file (js you can find in the link):
<table class="speedometr" >
<tr>
<td id="container" style= "width: 33%; height: 33%"></td>
<td id="container1" style= "width: 33%; height: 33%"></td>
<td id="container2" style= "width: 33%; height: 33%"></td>
</tr>
<tr></tr>
<td class="container">
<table class="speedometr_tables">
<tr>
<td align=center bgcolor="DDDFFF">
<B>1</B>
</td>
<td align=center bgcolor="DDDFFF">
From(h:mm)
</td>
<td align=center bgcolor="DDDFFF">
Up to(h:mm)
</td>
</tr>
<tr>
<td align=center bgcolor="55BF3B">
<B>Ideal</B>
</td>
<td align=center>
0:00
</td>
<td align=center>
01:00
</td>
</tr>
<tr>
<td align=center bgcolor="DDDF0D">
<B>Optimal</B>
</td>
<td align=center>
01:00
</td>
<td align=center>
02:00
</td>
</tr>
<tr>
<td align=center bgcolor="DF5353">
<B>Critical</B>
</td>
<td align=center>
02:00
</td>
<td align=center>
03:00
</td>
</tr>
</table>
</td>
<td class="container">
<table class="speedometr_tables">
<tr>
<td align=center bgcolor="DDDFFF">
<B>2</B>
</td>
<td align=center bgcolor="DDDFFF">
From(h:mm)
</td>
<td align=center bgcolor="DDDFFF">
Up to(h:mm)
</td>
</tr>
<tr>
<td align=center bgcolor="55BF3B">
<B>Ideal</B>
</td>
<td align=center>
0:00
</td>
<td align=center>
100:00
</td>
</tr>
<tr>
<td align=center bgcolor="DDDF0D">
<B>Optimal</B>
</td>
<td align=center>
100:00
</td>
<td align=center>
200:00
</td>
</tr>
<tr>
<td align=center bgcolor="DF5353">
<B>Critical</B>
</td>
<td align=center>
200:00
</td>
<td align=center>
300:00
</td>
</tr>
</table>
</td>
<td class="container">
<table class="speedometr_tables">
<tr>
<td align=center bgcolor="DDDFFF">
<B>3</B>
</td>
<td align=center bgcolor="DDDFFF">
From(h:mm)
</td>
<td align=center bgcolor="DDDFFF">
Up to(h:mm)
</td>
</tr>
<tr>
<td align=center bgcolor="55BF3B">
<B>Ideal</B>
</td>
<td align=center>
0:00
</td>
<td align=center>
100:00
</td>
</tr>
<tr>
<td align=center bgcolor="DDDF0D">
<B>Optimal</B>
</td>
<td align=center>
100:00
</td>
<td align=center>
200:00
</td>
</tr>
<tr>
<td align=center bgcolor="DF5353">
<B>Critical</B>
</td>
<td align=center>
200:00
</td>
<td align=center>
300:00
</td>
</tr>
</table>
</td>
</table>
Try adding a print #media query to your stylesheet and adjust the width of your containers:
#media print {
.container {
width: 20%;
}
}
If your work is being cut off, add empty div at set points between your code to make sure it keeps certain content to each printed page.
add this css to the blank divs:
#media print
{
.blankdiv {page-break-after:always}
}
I have to submit in a form a value containing the value of a starting poker hand.
I thought to make a table with all the possible poker hands so the user can choose one from them.
This is the code I've written to create the table:
<table cellspacing="3" cellpadding="0" id="table">
<tbody>
<tr><td></td><td>A</td><td>K</td><td>Q</td><td>J</td><td>T</td><td>9</td><td>8</td><td>7</td><td>6</td><td>5</td><td>4</td><td>3</td><td>2</td></tr>
<tr class="row">
<td>A</td>
<td id="AA">AA</td>
<td id="AKs">AKs</td>
<td id="AQs">AQs</td>
<td id="AJs">AJs</td>
<td id="ATs">ATs</td>
<td id="A9s">A9s</td>
<td id="A8s">A8s</td>
<td id="A7s">A7s</td>
<td id="A6s">A6s</td>
<td id="A5s">A5s</td>
<td id="A4s">A4s</td>
<td id="A3s">A3s</td>
<td id="A2s">A2s</td>
</tr>
<tr class="row">
<td>K</td>
<td id="AKo">AKo</td>
<td id="KK">KK</td>
<td id="KQs">KQs</td>
<td id="KJs">KJs</td>
<td id="KTs">KTs</td>
<td id="K9s">K9s</td>
<td id="K8s">K8s</td>
<td id="K7s">K7s</td>
<td id="K6s">K6s</td>
<td id="K5s">K5s</td>
<td id="K4s">K4s</td>
<td id="K3s">K3s</td>
<td id="K2s">K2s</td>
</tr>
<tr class="row">
<td>Q</td>
<td id="AQo">AQo</td>
<td id="KQo">KQo</td>
<td id="QQ">QQ</td>
<td id="QJs">QJs</td>
<td id="QTs">QTs</td>
<td id="Q9s">Q9s</td>
<td id="Q8s">Q8s</td>
<td id="Q7s">Q7s</td>
<td id="Q6s">Q6s</td>
<td id="Q5s">Q5s</td>
<td id="Q4s">Q4s</td>
<td id="Q3s">Q3s</td>
<td id="Q2s">Q2s</td>
</tr>
<tr class="row">
<td>J</td>
<td id="AJo">AJo</td>
<td id="KJo">KJo</td>
<td id="QJo">QJo</td>
<td id="JJ">JJ</td>
<td id="JTs">JTs</td>
<td id="J9s">J9s</td>
<td id="J8s">J8s</td>
<td id="J7s">J7s</td>
<td id="J6s">J6s</td>
<td id="J5s">J5s</td>
<td id="J4s">J4s</td>
<td id="J3s">J3s</td>
<td id="J2s">J2s</td>
</tr>
<tr class="row">
<td>T</td>
<td id="ATo">ATo</td>
<td id="KTo">KTo</td>
<td id="QTo">QTo</td>
<td id="JTo">JTo</td>
<td id="TT">TT</td>
<td id="T9s">T9s</td>
<td id="T8s">T8s</td>
<td id="T7s">T7s</td>
<td id="T6s">T6s</td>
<td id="T5s">T5s</td>
<td id="T4s">T4s</td>
<td id="T3s">T3s</td>
<td id="T2s">T2s</td>
</tr>
<tr class="row">
<td>9</td>
<td id="A9o">A9o</td>
<td id="K9o">K9o</td>
<td id="Q9o">Q9o</td>
<td id="J9o">J9o</td>
<td id="T9o">T9o</td>
<td id="99">99</td>
<td id="98s">98s</td>
<td id="97s">97s</td>
<td id="96s">96s</td>
<td id="95s">95s</td>
<td id="94s">94s</td>
<td id="93s">93s</td>
<td id="92s">92s</td>
</tr>
<tr class="row">
<td>8</td>
<td id="A8o">A8o</td>
<td id="K8o">K8o</td>
<td id="Q8o">Q8o</td>
<td id="J8o">J8o</td>
<td id="T8o">T8o</td>
<td id="98o">98o</td>
<td id="88">88</td>
<td id="87s">87s</td>
<td id="86s">86s</td>
<td id="85s">85s</td>
<td id="84s">84s</td>
<td id="83s">83s</td>
<td id="82s">82s</td>
</tr>
<tr class="row">
<td>7</td>
<td id="A7o">A7o</td>
<td id="K7o">K7o</td>
<td id="Q7o">Q7o</td>
<td id="J7o">J7o</td>
<td id="T7o">T7o</td>
<td id="97o">97o</td>
<td id="87o">87o</td>
<td id="77">77</td>
<td id="76s">76s</td>
<td id="75s">75s</td>
<td id="74s">74s</td>
<td id="73s">73s</td>
<td id="72s">72s</td>
</tr>
<tr class="row">
<td>6</td>
<td id="A6o">A6o</td>
<td id="K6o">K6o</td>
<td id="Q6o">Q6o</td>
<td id="J6o">J6o</td>
<td id="T6o">T6o</td>
<td id="96o">96o</td>
<td id="86o">86o</td>
<td id="76o">76o</td>
<td id="66">66</td>
<td id="65s">65s</td>
<td id="64s">64s</td>
<td id="63s">63s</td>
<td id="62s">62s</td>
</tr>
<tr class="row">
<td>5</td>
<td id="A5o">A5o</td>
<td id="K5o">K5o</td>
<td id="Q5o">Q5o</td>
<td id="J5o">J5o</td>
<td id="T5o">T5o</td>
<td id="95o">95o</td>
<td id="85o">85o</td>
<td id="75o">75o</td>
<td id="65o">65o</td>
<td id="55">55</td>
<td id="54s">54s</td>
<td id="53s">53s</td>
<td id="52s">52s</td>
</tr>
<tr class="row">
<td>4</td>
<td id="A4o">A4o</td>
<td id="K4o">K4o</td>
<td id="Q4o">Q4o</td>
<td id="J4o">J4o</td>
<td id="T4o">T4o</td>
<td id="94o">94o</td>
<td id="84o">84o</td>
<td id="74o">74o</td>
<td id="64o">64o</td>
<td id="54o">54o</td>
<td id="44">44</td>
<td id="43s">43s</td>
<td id="42s">42s</td>
</tr>
<tr class="row">
<td>3</td>
<td id="A3o">A3o</td>
<td id="K3o">K3o</td>
<td id="Q3o">Q3o</td>
<td id="J3o">J3o</td>
<td id="T3o">T3o</td>
<td id="93o">93o</td>
<td id="83o">83o</td>
<td id="73o">73o</td>
<td id="63o">63o</td>
<td id="53o">53o</td>
<td id="43o">43o</td>
<td id="33">33</td>
<td id="32s">32s</td>
</tr>
<tr class="row">
<td>2</td>
<td id="A2o">A2o</td>
<td id="K2o">K2o</td>
<td id="Q2o">Q2o</td>
<td id="J2o">J2o</td>
<td id="T2o">T2o</td>
<td id="92o">92o</td>
<td id="82o">82o</td>
<td id="72o">72o</td>
<td id="62o">62o</td>
<td id="52o">52o</td>
<td id="42o">42o</td>
<td id="32o">32o</td>
<td id="22">22</td>
</tr>
</tbody></table>
</td></tr>
</table>
I'd like to allow the user to select his hand by clicking on it and then submit the value in the form. How can I achieve this?
Something like this? If you change the type of result into hidden you can submit the cards as a string.
To select a table cell you have to attach an event listener to it and keep track about what has been selected (or unselected again).
jQuery (within the $(document).ready() function, or after the table was created)
$('td').click(function(){
var hand = $(this).attr('id');
});
The number of possible poker hands is 2,598,960, so you don’t want to create a table of them. Instead, create a set of 52 items, each consisting of a check box and associated label, which identifies a card. Add JavaScript code to check that exactly 5 boxes have been selected when the form is submitted.