Horizontally and vertically responsive table with sticky/fixed headers?

Horizontally and vertically responsive table with sticky/fixed headers? - javascript

On a page on a website I'm building, there will only be a table displayed. I want that table to stick to the edges of the screen regardless of the width/height of the screen.
This table also needs to have sticky/fixed headers (so when they scroll down, the headers are still visible), which I'm finding complicates things as the widths and heights seemingly need to be set manually.
Also, it needs to be able to be horizontally scrollable in case there's a ton of columns. I don't want them all to be 10px wide, but the table itself still needs to stick to the edges of the screen as the dimensions change.
It works with keeping the headers sticky as the user scrolls, but the width and height of the elements have to all be set manually, which means it's not responsive whatsoever.
Is this possible at all? I'm not averse to JavaScript, but a pure CSS solution would be slightly preferred.
(JSFiddle)
body {
margin: 0;
padding: 0;
}
table {
table-layout: fixed;
border-collapse: collapse;
width: 375px;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
-webkit-border-horizontal-spacing: 0;
}
th,
td {
text-align: left;
padding: 10px 10px;
width: 105px;
word-wrap: break-word;
word-break: break-all;
-webkit-hyphens: auto;
hyphens: auto;
}
thead {
background-color: black;
color: #fff;
}
thead tr {
display: block;
position: relative;
}
tbody {
display: block;
overflow: auto;
height: 300px;
}
<table>
<thead>
<tr>
<th>Longer title for testing</th>
<th>Color</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple ioeras eionars ienraist eioarn stio enar sotinera oietnar i i i i i i i i i i i i i i i i i i i i i to</td>
<td>Red aeinrs tienras tienr eiostnnearhstniehrastneihrsaetinh iaroes nte narse itnar einaer ns eanr enrsena ernes netnea rnst sr</td>
<td>These are red.</td>
</tr>
<tr>
<td>Pear</td>
<td>Green</td>
<td>These are green.</td>
</tr>
<tr>
<td>Grape</td>
<td>Purple / Green</td>
<td>These are purple and green.</td>
</tr>
<tr>
<td>Orange</td>
<td>Orange</td>
<td>These are orange.</td>
</tr>
<tr>
<td>Banana</td>
<td>Yellow</td>
<td>These are yellow.</td>
</tr>
<tr>
<td>Kiwi</td>
<td>Green</td>
<td>These are green.</td>
</tr>
<tr>
<td>Plum</td>
<td>Purple</td>
<td>These are Purple</td>
</tr>
<tr>
<td>Watermelon</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Tomato</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Cherry</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Cantelope</td>
<td>Orange</td>
<td>These are orange inside.</td>
</tr>
<tr>
<td>Honeydew</td>
<td>Green</td>
<td>These are green inside.</td>
</tr>
<tr>
<td>Papaya</td>
<td>Green</td>
<td>These are green.</td>
</tr>
<tr>
<td>Raspberry</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Blueberry</td>
<td>Blue</td>
<td>These are blue.</td>
</tr>
<tr>
<td>Mango</td>
<td>Orange</td>
<td>These are orange.</td>
</tr>
<tr>
<td>Passion Fruit</td>
<td>Green</td>
<td>These are green.</td>
</tr>
</tbody>
</table>

If body height and width is set to 100% it will allow the child (table) to take the whole page.
body{
height: 100%;
width: 100%;
}
table{
height: 100%;
width: 100%;
}

Is this what you are looking for?
https://jsfiddle.net/6o1gbq6x/
<style>
body {
margin: 0;
padding: 0;
}
.table_container { /*responsive container*/
width: 100%;
margin: 0 auto;
height: 100%;
max-height: 300px;
}
table {
border-collapse: collapse;
width: auto;
-webkit-overflow-scrolling: touch;
-webkit-border-horizontal-spacing: 0;
}
th,
td {
text-align: left;
padding: 10px 10px;
width: 33%;
min-width: 100px;
word-wrap: break-word;
word-break: break-all;
-webkit-hyphens: auto;
hyphens: auto;
}
thead {
background-color: black;
color: #fff;
}
thead tr {
display: block;
position: relative;
}
tbody {
display: block;
overflow: auto;
height: 300px;
}
</style>
<div class="table_container">
<table>
<thead>
<tr>
<th>Longer title for testing</th>
<th>Color</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple ioeras eionars ienraist eioarn stio enar sotinera oietnar i i i i i i i i i i i i i i i i i i i i i to</td>
<td>Red aeinrs tienras tienr eiostnnearhstniehrastneihrsaetinh iaroes nte narse itnar einaer ns eanr enrsena ernes netnea rnst sr</td>
<td>These are red.</td>
</tr>
<tr>
<td>Pear</td>
<td>Green</td>
<td>These are green.</td>
</tr>
<tr>
<td>Grape</td>
<td>Purple / Green</td>
<td>These are purple and green.</td>
</tr>
<tr>
<td>Orange</td>
<td>Orange</td>
<td>These are orange.</td>
</tr>
<tr>
<td>Banana</td>
<td>Yellow</td>
<td>These are yellow.</td>
</tr>
<tr>
<td>Kiwi</td>
<td>Green</td>
<td>These are green.</td>
</tr>
<tr>
<td>Plum</td>
<td>Purple</td>
<td>These are Purple</td>
</tr>
<tr>
<td>Watermelon</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Tomato</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Cherry</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Cantelope</td>
<td>Orange</td>
<td>These are orange inside.</td>
</tr>
<tr>
<td>Honeydew</td>
<td>Green</td>
<td>These are green inside.</td>
</tr>
<tr>
<td>Papaya</td>
<td>Green</td>
<td>These are green.</td>
</tr>
<tr>
<td>Raspberry</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Blueberry</td>
<td>Blue</td>
<td>These are blue.</td>
</tr>
<tr>
<td>Mango</td>
<td>Orange</td>
<td>These are orange.</td>
</tr>
<tr>
<td>Passion Fruit</td>
<td>Green</td>
<td>These are green.</td>
</tr>
</tbody>
</table>
</div>
If not, please let me know and I'll adjust.

You can use position: fixed in thead tag(in css) to fix the table header at top
and for full width set width:100%

position:sticky on the <th> element is the answer.
The widths of the rows are not being set individually, however a min-width can be set on the <th> element.
Otherwise the width of the column will be either:
The width of the column title (because of white-space: nowrap on <th>), or
The width of the largest word in a <td> cell
I have added more columns to demonstrate the horizontal scrolling effect.
body {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
padding: 10px 10px;
}
th {
white-space: nowrap;
/* min-width: 105px; */
}
td {
word-wrap: break-word;
word-break: normal;
}
thead>tr>th {
position: sticky;
top: 0px;
left: 0px;
background-color: black;
color: white;
}
<table>
<thead>
<tr>
<th>Longer title for testing</th>
<th>Color</th>
<th>Description</th>
<th>A</th>
<th>B</th>
<th>Column</th>
<th>Column</th>
<th>An extremely long title to force horizontal scroll on full screen</th>
<th>An extremely long title to force horizontal scroll on full screen</th>
<th>An extremely long title to force horizontal scroll on full screen</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple ioeras eionars ienraist eioarn stio enar sotinera oietnar i i i i i i i i i i i i i i i i i i i i i to</td>
<td>Red aeinrs tienras tienr eiostnnearhstniehrastneihrsaetinh iaroes nte narse itnar einaer ns eanr enrsena ernes netnea rnst sr</td>
<td>These are red.</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Pear</td>
<td>Green</td>
<td>These are green.</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Grape</td>
<td>Purple / Green</td>
<td>These are purple and green.</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Orange</td>
<td>Orange</td>
<td>These are orange.</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Banana</td>
<td>Yellow</td>
<td>These are yellow.</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Kiwi</td>
<td>Green</td>
<td>These are green.</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Plum</td>
<td>Purple</td>
<td>These are Purple</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Watermelon</td>
<td>Red</td>
<td>These are red.</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Tomato</td>
<td>Red</td>
<td>These are red.</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Cherry</td>
<td>Red</td>
<td>These are red.</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Cantelope</td>
<td>Orange</td>
<td>These are orange inside.</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Honeydew</td>
<td>Green</td>
<td>These are green inside.</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Papaya</td>
<td>Green</td>
<td>These are green.</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Raspberry</td>
<td>Red</td>
<td>These are red.</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Blueberry</td>
<td>Blue</td>
<td>These are blue.</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Mango</td>
<td>Orange</td>
<td>These are orange.</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Passion Fruit</td>
<td>Green</td>
<td>These are green.</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>

Related

How to detect exact offset top() using jquery after scroll?

I have a table i want to detect offset top of TR where is clicked this is working fine but after scroll page this is not working fine. Why after scroll offset().top is changed? How can fix it?
$(function() {
$('tr').click(function() {
offsetTop = $(this).offset().top;
console.log(offsetTop);
});
});
.myDiv {
overflow-y: auto;
height: 250px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="myDiv">
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July 1</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July 2</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July 3</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July 4</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July 5</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July 6</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July 7</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July 8</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July 9</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July 10</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>

You could always calculate the offset, factoring in the scroll position:
var offset_t = $(selector).offset().top - $(window).scrollTop();
var offset_l = $(selector).offset().left - $(window).scrollLeft();

Table with horizontal and vertical scroll with fixed header

I do have a table with horizontal and vertical scroll with a fixed header with elements taking as much as space it needs. I am working with React. It would be awesome if there is a react based solution too if CSS alone cannot solve it.
Note:
I did try other solutions here but it is not what I'm looking for
It would be better if td can have min-width set on them too
The header shows menu when it is clicked for sorting and filtering

There's a simple CSS solution to fix rows(headers) and columns in a table.
th {
position: sticky:
top: 0;
}
The above snippet will fix the header to the top. Then it's just a matter of adding a simple overflow to the parent container of the table. You can find a simple example below -
.table-container {
overflow: auto;
max-height: 160px;
border: 1px solid red;
}
th {
position: sticky;
top: 0;
background: white;
}
<div class="table-container">
<table>
<thead>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
<th>Head 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>
</div>

Collapse HTML table rows by default

I'm using slight modification from this answer to make header rows collapsible in an HTML table.
I want to modify the JS snippet so that rows are collapsed rather than expanded by default (on page load/document ready). How can I do this?
Basically what I'm trying to achieve is for:
$(this).find('span').text(function(_, value){return value=='-'?'+':'-'});
$(this).nextUntil('tr.header').slideToggle(100, function(){
to be run once at page load/refresh, in addition to when header rows are clicked and toggled.
I know that I'll need to change the two tags two <span>+</span> in HTML, but am stuck on how to trigger this behavior on page load.
Javascript:
$(document).ready(function(){
$('tr.header').click(function(){
$(this).find('span').text(function(_, value){return value=='-'?'+':'-'});
$(this).nextUntil('tr.header').slideToggle(100, function(){
});
});
});
HTML:
<table border="0">
<tr class="header">
<th colspan="2">Header <span>-</span></th>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr class="header">
<th colspan="2">Header <span>-</span></th>
</tr>
<tr>
<td>date</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
</table>
CSS:
table, tr, td, th
{
border: 1px solid black;
border-collapse:collapse;
}
tr.header
{
cursor:pointer;
}
JSFiddle: https://jsfiddle.net/mkb39x0u/

Seems like you'd just do this in document.ready:
$('tr:not(.header)').hide();
Demo
Also, I'd probably toggle visibility of your plus and minus characters with a class on the row and CSS rather than cluttering up your script with that.

I just update your code with few JS changes, I hope it'll help you out. Thanks
Add below JS code before your click method
$('tr.header').nextUntil('tr.header').slideToggle(100);
$(document).ready(function(){
$('tr.header').nextUntil('tr.header').slideToggle(100);
$('tr.header').click(function(){
$(this).find('span').text(function(_, value){return value=='-'?'+':'-'});
$(this).nextUntil('tr.header').slideToggle(100, function(){
});
});
});
table, tr, td, th {
border: 1px solid black;
border-collapse:collapse;
}
tr.header {
cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="0">
<tr class="header">
<th colspan="2">Header <span>-</span></th>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr class="header">
<th colspan="2">Header <span>-</span></th>
</tr>
<tr>
<td>date</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
</table>
Another way you can achieve this functionality by using CSS
$(document).ready(function(){
$('tr.header').click(function(){
$(this).find('span').text(function(_, value){return value=='-'?'+':'-'});
$(this).nextUntil('tr.header').slideToggle(100, function(){
});
});
});
table {
border-collapse: collapse;
}
tr {
border: 1px solid #000;
display: none;
}
td + td {
border-left: 1px solid #000;
}
tr + tr {
border-top: 0;
}
tr.header {
cursor: pointer;
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="0">
<tr class="header">
<th colspan="2">Header <span>-</span></th>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr class="header">
<th colspan="2">Header <span>-</span></th>
</tr>
<tr>
<td>date</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
</table>

How to set different background color of every three html table rows in alternate

Suppose I have two HTML tables named table1 and table2. If I want to have different background of every alternative three rows of table2, how can I achieve that using CSS? For example set background of first 3 rows as blue, then another 3 rows as green, again another 3 rows as blue, again another 3 rows as green and so on. Basically I want two different background colors for every three rows in alternate. I found CSS styling for even and odd rows, or every nth rows, but not for this case. I have attached the screenshot of sample table. Rather than hard coding in individual row like in this code, I want to do it in CSS styling.
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 1px;
}
<table id="table2">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr bgcolor="#dddddd">
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr bgcolor="#dddddd">
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr bgcolor="#dddddd">
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr bgcolor="#dddddd">
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr bgcolor="#dddddd">
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr bgcolor="#dddddd">
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</table>
Any help is appreciated]1

You can use "nth-child" to achieve this.
tr:nth-child(6n+1),
tr:nth-child(6n+2),
tr:nth-child(6n+3) {
background: #dddddd;
}
Try with below snippet
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 1px;
}
tr:nth-child(6n+1),
tr:nth-child(6n+2),
tr:nth-child(6n+3) {
background: #dddddd;
}
<table id="table2">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td >Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td >Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td >Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td >Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td >Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td >Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</table>

You want the alternative color for every three group of rows. Let explain the formula of css tr:nth-child(6n+1),
tr:nth-child(6n+2),
tr:nth-child(6n+3) where n=0,1,2,3......this tr selection will start from 1-3, 7-9....
Likewise tr:nth-child(6n+4),
tr:nth-child(6n+5),
tr:nth-child(6n+6) where n=0,1,2,3......this tr selection will start from 4-6, 10-12....
tr:nth-child(6n+1),
tr:nth-child(6n+2),
tr:nth-child(6n+3) {
background: blue;
}
tr:nth-child(6n+4),
tr:nth-child(6n+5),
tr:nth-child(6n+6) {
background: green;
}
table {
color: #fff;
}
<table id="table2">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</table>
now you will get alternative color of blue and green as your requirement

You can use javascript for set the background-color
$('document').ready(function(){
$('#table1 tr').each((index, value) => {
if(index % 3 != 0){
value.css({'background-color': '#0000FF'});
}else{
value.css({'background-color': '#00FF00'});
}
});
});
or define two css class
.blue {background-color: #0000FF;}
.green {background-color: #00FF00;}
and assign this class in all tr of table you want

You can separate the header and body and use nth-child concept
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
table tbody tr:nth-child(6n+1),table tbody tr:nth-child(6n+2),table tbody
tr:nth-child(6n+3) {
background: #dddddd;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 1px;
}
</style>
</head>
<body>
<table id="table2">
<thead>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr bgcolor="#dddddd">
<td >Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr bgcolor="#dddddd">
<td >Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr bgcolor="#dddddd">
<td >Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr bgcolor="#dddddd">
<td >Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr bgcolor="#dddddd">
<td >Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr bgcolor="#dddddd">
<td >Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tbody>
</table>
</body>
</html>

<html>
<head>
<title></title>
<style>
.green{background-color:white;}
.blue{background-color:gray;}
</style>
<script>
function alterColor(id){
var table = document.getElementById(id);
var rows = table.getElementsByTagName("tr"); //get all the rows
for(i = 0; i < rows.length; i++){ //alterColor styles
doalterColor(rows[i], i);
}
}
function doalterColor(row, i){
if((i % 6 == 0) ||(i % 6 == 1)||(i % 6 == 2)){
row.className = "blue";
}else{
row.className = "green";
}
}
</script>
</head>
<body onLoad="alterColor('mytable')">
<table id="mytable">
<tr>
<td>cell 1</td>
<td>cell 2</td>
</tr><tr>
<td>cell 2</td>
<td>cell 2</td>
</tr><tr>
<td>cell 3</td>
<td>cell 2</td>
</tr><tr>
<td>cell 4</td>
<td>cell 2</td>
</tr><tr>
<td>cell 5</td>
<td>cell 2</td>
</tr><tr>
<td>cell 6</td>
<td>cell 2</td>
</tr><tr>
<td>cell 7</td>
<td>cell 2</td>
</tr><tr>
<td>cell 8</td>
<td>cell 2</td>
</tr><tr>
<td>cell 9</td>
<td>cell 2</td>
</tr><tr>
<td>cell 10</td>
<td>cell 2</td>
</tr><tr>
<td>cell 11</td>
<td>cell 2</td>
</tr><tr>
<td>cell 12</td>
<td>cell 2</td>
</tr><tr>
<td>cell 13</td>
<td>cell 2</td>
</tr>
</table>
</body>

scrolling horizontally with fixed left div

I'm looking for a way to scroll horizontally in a div view, with on the left a sidebar that is fixed. So when there is scrolling (horizontal), everything disappears behind this sidebar.
To illustrate:
I do not know how this can be done precisely. Can this only through CSS or do it in conjunction with Javascript? And if so, how exactly?
Here's [my working fiddle so far]
ssss(http://jsfiddle.net/justamir/fp2xgqL5/)

If you are using a table, to make it scrollable you place it within a div with overflow. If you want a fix column, this must be placed outside the overflowed div. You end up with a layout like this:
.scrollable {
width: 100px;
overflow: auto;
}
.fixed,
.scrollable {
float: left;
}
<table class="fixed">
<tr>
<th>FIXED</th>
</tr>
<tr>
<td>val1</td>
</tr>
<tr>
<td>val2</td>
</tr>
<tr>
<td>val3</td>
</tr>
<tr>
<td>val4</td>
</tr>
</table>
<div class="scrollable">
<table>
<tr>
<th>col1</th>
<th>col1</th>
<th>col1</th>
<th>col1</th>
<th>col1</th>
<th>col1</th>
</tr>
<tr>
<td>val1</td>
<td>val1</td>
<td>val1</td>
<td>val1</td>
<td>val1</td>
<td>val1</td>
</tr>
<tr>
<td>val2</td>
<td>val2</td>
<td>val2</td>
<td>val2</td>
<td>val2</td>
<td>val2</td>
</tr>
<tr>
<td>val3</td>
<td>val3</td>
<td>val3</td>
<td>val3</td>
<td>val3</td>
<td>val3</td>
</tr>
<tr>
<td>val4</td>
<td>val4</td>
<td>val4</td>
<td>val4</td>
<td>val4</td>
<td>val4</td>
</tr>
</table>
</div>

Develop Reference

JavaScript is the programming language of the Web.

Horizontally and vertically responsive table with sticky/fixed headers? - javascript

If body height and width is set to 100% it will allow the child (table) to take the whole page. body{ height: 100%; width: 100%; } table{ height: 100%; width: 100%; }

You can use position: fixed in thead tag(in css) to fix the table header at top and for full width set width:100%

Related

How to detect exact offset top() using jquery after scroll?

Table with horizontal and vertical scroll with fixed header

Collapse HTML table rows by default

How to set different background color of every three html table rows in alternate

scrolling horizontally with fixed left div

Categories

Resources