Tooltip window changing height and width when more text is added - javascript

i tried to make this tooltip dynamic with the text (so when there is less text - smaller window) but it didn't work for me. I need this tooltip to change size of itself when more text is added and shrink itself when there is only a few words. Example in Jsfiddle.
PS: I don't like to use JS, but if it's necessary I can live with that.
JsFiddle: https://jsfiddle.net/d4m5hj6f/
.content {
position: static;
}
.header {
text-align: center;
position: relative;
margin-top: 40px;
}
th, td {
border:1px solid black;
overflow: hidden;
}
th {
background-color: #eff0f0;
}
td {
background-color: #eed6b1;
height: 45px;
}
tr:nth-child(even) td {
background-color: #FFF1E1;
}
table {
table-layout: fixed;
min-width: 2000px;
border-collapse: collapse;
width: 100%;
margin-left: 5px;
}
.DZ {
text-align: center;
}
tr:hover td {
background-color: #ccc;
}
tr:nth-child(even) {
background-color: #e5e5e5;
}
tr td {
border-right: 1px solid #a5a5a5;
}
.Bezborder {
border-right: 1px solid black;
}
.ht:hover .tooltip {
display: block;
}
.tooltip {
position:absolute;
display: none;
background-color: #fafbb8;
border: 1px solid black;
border-radius: 4px;
margin-left: 28px;
padding: 10px;
position:absolute;
z-index: 1000;
width: 680px;
height: 50px;
font-weight: bold;
}
<div class="content">
<div class="header">
</div>
<a name="172016">
<!--1. riadok H-->
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<th width="50px">C. u.</th>
<th width="30px">Zobrazit</th>
<th width="30px">Typ</th>
<th width="220px">Look here ---></th>
<th width="650px">hover Under this</th>
<th width="130px">System</th>
<th width="100px">Dopad/Symptom</th>
<th width="100px">Dátum zadania</th>
<th width="100px">Dátum vzniku</th>
<th width="100px">Datum Verifikacie</th>
<th width="80px">Ukoncenie</th>
<th width="100px">Dátum</th>
</tr>
<!--2. riadok D-->
<tr>
<td style="text-align:center">100</td>
<td style="text-align:center">X</td>
<td style="text-align:center">C </td>
<td>DOBRIKOVA/DURACKA</td>
<td class="ht"> Gefco PC nasa siet CD vs finalne riesenie internet gefco pc CORAIL <span class="tooltip">Tooltip windows need to change with text, more text - larger window, less text = smaller windows.</span></td>
<td>CORAIL/CONSO</td>
<td></td>
<td class="DZ">06/07/2016</td>
<td class="DZ">06/07/2016</td>
<td class="DZ">06/07/2016</td>
<td style="text-align:center">OK</td>
<td class="Bezborder" style="text-align:center">07/07/2016</td>
</tr>
<!--3. riadok D-->
<tr>
<td style="text-align:center">101</td>
<td style="text-align:center">X</td>
<td style="text-align:center">C </td>
<td>DOBRIKOVA/DURACKOVA</td>
<td class="ht"> Gefco PC nasa siet CD vs finalne riesenie internet gefco pc CORAIL <span class="tooltip">You see there is a big tooltip window space under this.</span></td>
<td>CORAIL/CONSO</td>
<td></td>
<td class="DZ">06/07/2016</td>
<td class="DZ">06/07/2016</td>
<td class="DZ">06/07/2016</td>
<td style="text-align:center">OK</td>
<td class="Bezborder" style="text-align:center">07/07/2016</td>
</tr>
</table>
</a>
</div>


Removing the width property from the tooltip css should work. Remove the height too if you want it to adapt when resizing the window.


Are you trying to achieved something like this
.content {
position: static;
}
.header {
text-align: center;
position: relative;
margin-top: 40px;
}
th, td{
border:1px solid black;
overflow: hidden;
}
th{
background-color: #eff0f0;
}
td{
background-color: #eed6b1;
height: 45px;
}
tr:nth-child(even) td {
background-color: #FFF1E1;
}
table{
table-layout: fixed;
min-width: 2000px;
border-collapse: collapse;
width: 100%;
margin-left: 5px;
}
.DZ {
text-align: center;
}
tr:hover td{
background-color: #ccc;
}
tr:nth-child(even) {
background-color: #e5e5e5;
}
tr td{
border-right: 1px solid #a5a5a5;
}
.Bezborder {
border-right: 1px solid black;
}
.ht:hover .tooltip {
display: block;
}
.tooltip {
position:absolute;
display: none;
background-color: #fafbb8;
border: 1px solid black;
border-radius: 4px;
margin-left: 28px;
padding: 10px;
position:absolute;
z-index: 1000;
width: 680px;
/* height: 50px;*/
font-weight: bold;
}
<div class="content">
<div class="header">
</div>
<a name="172016">
<!--1. riadok H-->
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<th width="50px">C. u.</th>
<th width="30px">Zobrazit</th>
<th width="30px">Typ</th>
<th width="220px">Cislo/Meno</th>
<th width="650px">Popis</th>
<th width="130px">System</th>
<th width="100px">Dopad/Symptom</th>
<th width="100px">Dátum zadania</th>
<th width="100px">Dátum vzniku</th>
<th width="100px">Datum Verifikacie</th>
<th width="80px">Ukoncenie</th>
<th width="100px">Dátum</th>
</tr>
<!--2. riadok D-->
<tr>
<td style="text-align:center">100</td>
<td style="text-align:center">X</td>
<td style="text-align:center">C </td>
<td>DOBRIKOVA/DURACKA</td>
<td class="ht"> Gefco PC nasa siet CD vs finalne riesenie internet gefco pc CORAIL <span class="tooltip">ked sa vytvara uplne novu hypotheza tak nefunguje vyber tlaciarni a globalny export tiez NOK (nepouzivame)</span></td>
<td>CORAIL/CONSO</td>
<td></td>
<td class="DZ">06/07/2016</td>
<td class="DZ">06/07/2016</td>
<td class="DZ">06/07/2016</td>
<td style="text-align:center">OK</td>
<td class="Bezborder" style="text-align:center">07/07/2016</td>
</tr>
<!--3. riadok D-->
<tr>
<td style="text-align:center">101</td>
<td style="text-align:center">X</td>
<td style="text-align:center">C </td>
<td>DOBRIKOVA/DURACKOVA</td>
<td class="ht"> Gefco PC nasa siet CD vs finalne riesenie internet gefco pc CORAIL <span class="tooltip">ked sa vytvara uplne novu hypotheza tak nefunguje vyber tlaciarni a globalny export tiez NOK (nepouzivame)</span></td>
<td>CORAIL/CONSO</td>
<td></td>
<td class="DZ">06/07/2016</td>
<td class="DZ">06/07/2016</td>
<td class="DZ">06/07/2016</td>
<td style="text-align:center">OK</td>
<td class="Bezborder" style="text-align:center">07/07/2016</td>
</tr>


In your code you have a fix value for your tooltip width and height.
If you need to make the toolip width and height adjusted dynamically by its content you should remove the width and height value.
Edit based on your comment.
If you need to keep some space between the tooltip and your view port you can use margin property, this will allow some space on each d side of your tooltip.
Try to comment out as in the follow example:
https://jsfiddle.net/d4m5hj6f/6/
.tooltip {
position:absolute;
display: none;
background-color: #fafbb8;
border: 1px solid black;
border-radius: 4px;
margin: 28px;
padding: 10px;
position:absolute;
z-index: 1000;
/*width: 680px;*/
/*height: 50px;*/
font-weight: bold;
}

Related

how can i make the table responsive with fixed header? Means it scrolls when it reaches maximum viewpoint and also header fixed at its point

How can i make the table responsive with fixed header? means it scrolls when reaches maximum viewpoint. Well, i don't want to scroll the whole page on reaching max viewpoint instead i want table to be scrolled. Also fixed header is important. I tried with box-sizing: border-box; and overflow-x:scroll;but it didn't worked , help me to create a responsive table. Thanks.
table{
border-collapse: separate;
border-spacing: 0;
width: 100%;
box-sizing: border-box;
}
thead,tbody{
box-sizing: border-box;
overflow: auto;
}
th,td{
padding: 6px 15px;
}
th{
background: #42444e;
color: #fff;
text-align: left;
position: static;
top: 50px;
}
tbody tr td img{
flex-wrap: wrap;
pointer-events: none;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
width: 30px;
height: 30px;
float: none;
display:block;
object-fit: fill;
border-radius: 10%;
}
tr:first-child th:first-child {
border-top-left-radius: 6px;
}
tr:first-child th:last-child {
border-top-right-radius: 6px;
}
td{
border-right: 1px solid #c6c9cc;
border-bottom: 1px solid #c6c9cc;
}
td:first-child {
border-left: 1px solid #c6c9cc;
}
tr:nth-child(even) td {
background: #eaeaed;
}
tr:last-child td:first-child {
border-bottom-left-radius: 6px;
}
tr:last-child td:last-child {
border-bottom-right-radius: 6px;
}
<table>
<thead>
<tr>
<th>Image</th>
<th>ID</th>
<th>Date</th>
<th>Name</th>
<th>Email</th>
<th>Phone no.</th>
<th>Role</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="img/4.jpeg"></td>
<td>1</td>
<td>445445564</td>
<td>Umann goswami</td>
<td>Umanngoswami#gmail.com</td>
<td>9999672450</td>
<td>Admin</td>
</tr>
<tr>
<td><img src="img/4.jpeg"></td>
<td>1</td>
<td>445445564</td>
<td>Umann goswami</td>
<td>Umanngoswami#gmail.com</td>
<td>9999672450</td>
<td>Admin</td>
</tr>
<tr>
<td><img src="img/4.jpeg"></td>
<td>1</td>
<td>445445564</td>
<td>Umann goswami</td>
<td>Umanngoswami#gmail.com</td>
<td>9999672450</td>
<td>Admin</td>
</tr>
<tr>
<td><img src="img/4.jpeg"></td>
<td>1</td>
<td>445445564</td>
<td>Umann goswami</td>
<td>Umanngoswami#gmail.com</td>
<td>9999672450</td>
<td>Admin</td>
</tr>
</thead>
</table>

I reviewed your codepan and conclude with that, You need to add some CSS property in your CSS file and it's work.
tbody {
height: 200px;
display: inline-block;
overflow: auto;
}
thead tr th{
position: sticky;
top:0;
left:0;
right:0;
}

set position sticky of header
and for table overflow-y set as auto
.fixTable {
overflow-y: auto;
height: 110px;
}
.fixTable thead th {
position: sticky;
top: 0;
}
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
padding: 8px 15px;
border: 2px solid #529432;
}
th {
background: #060606;
}
::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar:vertical {
width: 12px;
}
::-webkit-scrollbar:horizontal {
height: 12px;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .5);
border-radius: 10px;
border: 2px solid #ffffff;
}
::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #ffffff;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="fixTable">
<table>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1</td>
<td>2.1</td>
</tr>
<tr>
<td>1.2</td>
<td>2.2</td>
</tr>
<tr>
<td>1.3</td>
<td>2.3</td>
</tr>
<tr>
<td>1.4</td>
<td>2.4</td>
</tr>
<tr>
<td>1.5</td>
<td>2.5</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

How to fix table thead and scrollable tbody(thead contain 3 row)

I have the following problem: My table have big thead (3 row). I wanna fix thead and tbody scrolling. I use jquery
but when I scrolling down, borders thead disappear.
$(document).ready(function() {
document.querySelector(".tableContainer").addEventListener("scroll", function() {
var translate = "translate(0," + this.scrollTop + "px)";
this.querySelector("thead").style.transform = translate;
});
});
.TableData {
border-collapse: collapse;
font-family: "Arial Narrow", "Franklin Gothic Medium", "Arial";
font-size: 1.05em;
width: 100%;
height: 60vh;
overflow-x: hidden;
.TableData td,
.TableData th {
border: 1px solid black;
padding: 2px;
}
.TableData>thead>tr>th {
border: 1px solid black;
padding: 2px;
background: #d9edf7;
vertical-align: middle;
text-align: center;
}
.TableData thead>tr {
border: 1px solid black;
}
.TableData>tbody>tr>th {
border: 1px solid black;
padding: 2px;
}
.TableData>tbody>tr.tr1 {
background: #eee;
font-weight: 600;
}
.TableData>tbody>tr.tr1>td {
vertical-align: middle;
text-align: center;
}
.TableData>tbody>tr.tr2 {
background: #d9edf7;
font-weight: 600;
}
.TableData>tbody>tr.tr2>td {
vertical-align: middle;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="tableContainer" style="overflow-x:hidden;height:500px;">
<table class="TableData">
<thead>
<tr>
<th rowspan="3">some text</th>
<th rowspan="3">some text</th>
<th>some text</th>
<th colspan="6">some text</th>
<th colspan="4">some text</th>
<th colspan="10">some text some text</th>
<th colspan="3">some text</th>
<th rowspan="3">some text</th>
</tr>
<tr>
<th rowspan="2">%</th>
<th rowspan="2">№ </th>
<th rowspan="2">Вх-%</th>
<th colspan="3">some text</th>
<th rowspan="2">some text</th>
<th colspan="2">1</th>
<th colspan="2">2</th>
<th rowspan="2">Вх-%</th>
<th colspan="3">NTU</th>
<th rowspan="2">ΔNTU T2-T1</th>
<th rowspan="2">Кt,some text</th>
<th colspan="4">some text</th>
<th rowspan="2">some text</th>
<th rowspan="2">% some text</th>
<th rowspan="2">NTU</th>
</tr>
<tr>
<th>Т0</th>
<th>Т1</th>
<th>Т2</th>
<th>Вх-%</th>
<th>NTU</th>
<th>Вх-%</th>
<th>NTU</th>
<th>Т0</th>
<th>Т1</th>
<th>Т2</th>
<th>А420</th>
<th>Т420</th>
<th>А440</th>
<th>Т440</th>
</tr>
</thead>
</table>
</div>
P.S I try more combination, with css, js. good solution with this jquery, but something wrong. Somebody help me fix this problem.
https://jsfiddle.net/testuser1234/w1sb26y3/?

You will have to fix the height of tbody and then set overflow-y such that it allows scroll.
You can try something like this (taken from this post-- How can I let a table's body scroll but keep its head fixed in place?)
.TableData thead {
display: table;
table-layout:fixed;
width: 100%;
}
.TableData tbody {
display: block;
height: 10em; //CHANGE THIS ACCORDING TO NEED
overflow-y: scroll;
}
.TableData tbody tr {
display: table;
table-layout:fixed;
width: 100%;
}
.TableData th, .TableData td {
width: auto;
border: 1px solid;
}

Set class in HTML table, but not for the entire column

Here is the situation, I have a HTML file with a table, the table gets filled with XML data. The last column (10) got a number in it: 1, 2, 3, 4 or 5. I've got 5 lines of jQuery which look for the number and give the cell with the corresponding number a specific class, this works fine (The cell has 0% opacity because it's not meant to be "shown", but for our means, it works fine like that).
Now the problem is: Column 7 and 8 need to get that class to without the whole column getting it, just the row with the specific number.
I've got a jsfiddle so you can see the code and stuff:
The jQuery:
$("td:nth-child(10):contains('1')").addClass('disaster');
$("td:nth-child(10):contains('2')").addClass('high');
$("td:nth-child(10):contains('3')").addClass('average');
$("td:nth-child(10):contains('4')").addClass('warning');
$("td:nth-child(10):contains('5')").addClass('information');
Note: The data in the table is just for testing, the real xml will have those number of 1, 2, 3, 4, 5 in like 100 rows in a random order.
EDIT: Got a picture of how it should look:
$("td:nth-child(10):contains('1')").addClass('disaster');
$("td:nth-child(10):contains('2')").addClass('high');
$("td:nth-child(10):contains('3')").addClass('average');
$("td:nth-child(10):contains('4')").addClass('warning');
$("td:nth-child(10):contains('5')").addClass('information');
td:nth-child(10) {
opacity: 0;
}
.disaster{
background-color: #E45858
}
.high{
background-color: #E87658
}
.average{
background-color: #FEA058
}
.warning{
background-color: #FEC858
}
.information{
background-color: #7498FE
}
/*CSS for main elements*/
div {
max-width: 2600px;
display: block;
}
body {
font-family: Arial, Tahoma, Verdana, sans-serif;
background-color: #FFFFFF;
}
table {
text-align: left;
border-collapse: collapse;
}
th {
font-size: 75%;
font-weight: normal;
color: #768C98;
padding-top: 5px;
padding-bottom: 5px;
border-bottom: 2px solid #DCE2E4;
}
td {
font-size: 75%;
color: #1F2C33;
height: 25px;
padding-top: 1px;
padding-bottom: 1px;
border-bottom: 1px solid #EAEEF0;
}
img {
position: absolute; left: -100px;
margin-top: 165px;
transform: rotate(270deg);
}
/*CSS for Hover*/
td:nth-child(1):hover{
text-decoration: underline;
}
td:nth-child(1) {
background-color: #FFFFFF;
}
td:nth-child(2) {
background-color: #FFFFFF;
}
tr.NoHover:hover{
background-color: #FFFFFF;
}
tr:hover {
background-color: #E8F5FF;
}
/*Column specific CSS*/
th.col1 {
text-align: right;
width: 240px;
padding-right: 18px
}
th.col2 {
width: 11px;
padding: none;
}
th.col3 {
text-align: left;
width: 188px;
padding-left: 10px;
}
th.col4 {
text-align: left;
width: 70px;
}
th.col5 {
text-align: left;
width: 77px;
padding-left: 82px;
}
th.col6 {
text-align: left;
width: 430px;
}
th.col7 {
text-align: left;
padding-left: 10px;
width: 497px;
}
th.col8 {
text-align: left;
width: 498px;
}
th.col9 {
text-align: left;
padding-left: 10px;
width: 75px;
}
td:nth-child(1) {
text-align: right;
color: #0274B8;
padding-right: 18px;
border-right: 2px solid #AAD6F0;
border-bottom: none;
}
td:nth-child(2) {
color: white;
border-bottom: none;
width: 11px;
padding: none;
}
td:nth-child(3) {
text-align: left;
text-decoration: underline dotted;
padding-left: 10px;
border-bottom: 1px solid #EAEEF0;
}
td:nth-child(4) {
text-align: left;
color: #DC0000;
border-bottom: 1px solid #EAEEF0;
}
td:nth-child(5) {
text-align: right;
text-decoration: underline dotted;
padding-right: 15px;
border-bottom: 1px solid #EAEEF0;
}
td:nth-child(6) {
text-align: left;
text-decoration: underline dotted;
border-bottom: 1px solid #EAEEF0;
}
td:nth-child(7) {
text-align: left;
text-decoration: underline dotted ;
padding-left: 10px;
border-bottom: 1px solid #EAEEF0;
}
td:nth-child(8) {
text-align: left;
text-decoration: underline dotted;
border-bottom: 1px solid #EAEEF0;
}
td:nth-child(9) {
text-align: left;
padding-left: 10px;
border-bottom: 1px solid #EAEEF0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body>
<br><br>
<div id="main">
<table id="Table">
<thead>
<tr class="NoHover">
<th class="col1" scope='col' >Time▼</th>
<th class="col2" scope='col' ></th>
<th class="col3" scope='col' >Client</th>
<th class="col4" scope='col' >Status</th>
<th class="col5" scope='col' >Site</th>
<th class="col6" scope='col' >Host</th>
<th class="col7" scope='col' >Problem • Cause</th>
<th class="col8" scope='col' ></th>
<th class="col9" scope='col' >Frequency</th>
<th class="col10" scope='col'></th>
</tr>
</thead>
<tbody id="TableData">
<tr>
<td>2017-11-22</td>
<td>1</td>
<td>Client 1</td>
<td>FAILING</td>
<td>Site 1</td>
<td>PC1</td>
<td>test1</td>
<td>Unable to open service</td>
<td>24x7</td>
<td>1</td>
</tr>
<tr>
<td>2017-11-22</td>
<td>1</td>
<td>Client 2</td>
<td>FAILING</td>
<td>Site 2</td>
<td>PC2</td>
<td>test2</td>
<td>Unable to open service</td>
<td>24x7</td>
<td>2</td>
</tr>
<tr>
<td>2017-11-22</td>
<td>1</td>
<td>Client 3</td>
<td>FAILING</td>
<td>Site 3</td>
<td>PC3</td>
<td>test3</td>
<td>Unable to open service</td>
<td>24x7</td>
<td>3</td>
</tr>
<tr>
<td>2017-11-22</td>
<td>1</td>
<td>Client 4</td>
<td>FAILING</td>
<td>Site 4</td>
<td>PC4</td>
<td>test4</td>
<td>Unable to open service</td>
<td>24x7</td>
<td>4</td>
</tr>
<tr>
<td>2017-11-22</td>
<td>1</td>
<td>Client 5</td>
<td>FAILING</td>
<td>Site 5</td>
<td>PC5</td>
<td>test5</td>
<td>Unable to open service</td>
<td>24x7</td>
<td>5</td>
</tr>
</tbody>
</table>
</div>
</body>

I think you are looking for the .siblings() selector:
$("td:nth-child(10):contains('1')").siblings('td:nth-child(7), td:nth-child(8)').addClass('disaster');
$("td:nth-child(10):contains('2')").siblings('td:nth-child(7), td:nth-child(8)').addClass('high');
$("td:nth-child(10):contains('3')").siblings('td:nth-child(7), td:nth-child(8)').addClass('average');
$("td:nth-child(10):contains('4')").siblings('td:nth-child(7), td:nth-child(8)').addClass('warning');
$("td:nth-child(10):contains('5')").siblings('td:nth-child(7), td:nth-child(8)').addClass('information');
Fiddle: https://jsfiddle.net/8sL86sc7/2/

Something like this maybe? (Fiddle)
$("tr").each(function(index) {
var row = $(this),
lastCol = row.find('td:nth-child(10)'),
appendTo = row.find('td:nth-child(7), td:nth-child(8), td:nth-child(10)');
switch(lastCol.text()) {
case '1':
appendTo.addClass('disaster');
break;
case '2':
appendTo.addClass('high');
break;
case '3':
appendTo.addClass('average');
break;
case '4':
appendTo.addClass('warning');
break;
case '5':
appendTo.addClass('information');
break;
}
});
If there are a lot of rows and you don't need extra stuff to happen exept for the added classes, this could be overkill. the .siblings() selector (as in this answer) could be enough.

Bootstrap table columns to be collapsible at mobile view

I am trying to design a table wherein at mobile view the last two to three columns which are not visible in mobile view should be made collapsible using only CSS and if possible Javascript not jQuery. This is to be done for salesforce web application so no jQuery is allowed. Any help would great.
Tried with this example:
http://codepen.io/anon/pen/QwPVNW
This is somewhat similar but I am unable to break the last two to three columns data and show it below.
body {
font-family: arial;
}
table {
border: 1px solid #ccc;
width: 100%;
margin: 0;
padding: 0;
border-collapse: collapse;
border-spacing: 0;
}
table tr {
border: 1px solid #ddd;
padding: 5px;
}
table th,
table td {
padding: 10px;
text-align: center;
}
table th {
text-transform: uppercase;
font-size: 14px;
letter-spacing: 1px;
}
#media screen and (max-width: 600px) {
table {
border: 0;
}
table thead {
display: none;
}
table tr {
margin-bottom: 10px;
display: block;
border-bottom: 2px solid #ddd;
}
table td {
display: block;
text-align: right;
font-size: 13px;
border-bottom: 1px dotted #ccc;
}
table td:last-child {
border-bottom: 0;
}
table td:before {
content: attr(data-label);
float: left;
text-transform: uppercase;
font-weight: bold;
}
}
<table>
<thead>
<tr>
<th>Payment</th>
<th>Issue Date</th>
<th>Amount</th>
<th>Period</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Payment">Payment #1</td>
<td data-label="Issue Date">02/01/2015</td>
<td data-label="Amount">$2,311</td>
<td data-label="Period">01/01/2015 - 01/31/2015</td>
</tr>
<tr>
<td data-label="Payment">Payment #2</td>
<td data-label="Issue Date">03/01/2015</td>
<td data-label="Amount">$3,211</td>
<td data-label="Period">02/01/2015 - 02/28/2015</td>
</tr>
</tbody>
</table>

How to achieve alternating row styles for a responsive table?

I think I need JavaScript to solve this but that's why I need help (I've only edited existing JavaScript - never created them).
I have two striped tables nest side-by-side that when viewed on a mobile device, the table on the right moves below the table on the left to look as one continuous table.
The problem is with the table striping only when viewed on a mobile device if the tbody row counts are an even number, I end up with two consecutive rows in the middle being the same color.
#media only screen and (max-width: 480px) {
.sizesTableContent {
display:block !important;
width:100% !important;
}
.hider {
display: none;
}
}
.sizesAsterisk {
width:100%;
border-collapse: collapse;
text-align: left;
font-family: arial, helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
}
.hanging {
text-indent: -0.5em;
padding-left: 0.5em;
}
.sizesTableContent {
vertical-align: top;
}
.sizesTwoColumn {
width:100%;
border-collapse: collapse;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
.sizes {
border-collapse: collapse;
white-space: nowrap;
width: 100%;
text-align: center;
font-family: arial, helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
}
.sizes td:first-child {
text-align: left;
font-weight: bold;
}
.sizes th {
border-bottom: 1pt solid #000000;
vertical-align: bottom;
font-family: arial, helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
}
.sizes th:first-child {
text-align: left;
}
.sizes tbody tr:hover {
background: #D2DAE3;
}
.sizes tbody tr:nth-child(odd) {
background: #ffffcc;
}
.sizes tbody tr:nth-child(odd):hover {
background: #D2DAE3;
}
<table class="sizesAsterisk">
<tr>
<td>
<table class="sizesTwoColumn">
<tr>
<td class="sizesTableContent">
<table class="sizes" cellspacing="0" cellpadding="0">
<col width="33.3%">
<col width="33.3%">
<col width="33.4%">
<thead>
<tr>
<th>Size in
<br/>Inches</th>
<th>Lbs.
<br/>Per Ft</th>
<th>Est. Lbs.
<br/>Per 20' Bar</th>
</tr>
</thead>
<tbody>
<!--First column size data go between the tbody tags-->
<tr>
<td>1" x 1/4</td>
<td>.620</td>
<td>12.40</td>
</tr>
<tr>
<td>1-1/4 x 5/15</td>
<td>.960</td>
<td>19.20</td>
</tr>
<tr>
<td>1-1/2 x 5/16</td>
<td>1.180</td>
<td>23.60</td>
</tr>
</tbody>
</table>
</td>
<td class="hider" style="border-right: 1px solid #000000" width="14px"></td>
<td class="hider" width="14px"></td>
<td class="sizesTableContent">
<table class="sizes" cellspacing="0" cellpadding="0">
<col width="33.3%">
<col width="33.3%">
<col width="33.4%">
<thead class="hider">
<tr>
<th>Size in
<br/>Inches</th>
<th>Lbs.
<br/>Per Ft</th>
<th>Est. Lbs.
<br/>Per 20' Bar</th>
</tr>
</thead>
<tbody>
<!--Second column size data go between the tbody tags-->
<tr>
<td>1-1/2 x 7/16</td>
<td>1.560</td>
<td>31.20</td>
</tr>
<tr>
<td>1-3/4 x 7/16<span style="color:red"> *</span>
</td>
<td>1.910</td>
<td>38.20</td>
</tr>
<tr>
<td>2" x 1/2<span style="color:red"> *</span>
</td>
<td>2.587</td>
<td>51.74</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="hanging"><!--Asterisk notes go between the td tags-->
<span style="color:red">* </span>Also in 10' Lengths.
</td>
</tr>
</table>

You won't need JavaScript. Simply use some :last-child pseudo-selectors in your media query to change the presentation a little more in mobile view. This essentially switches the even/odd backgrounds of the 2nd table only in mobile view:
.sizesTableContent:last-child .sizes tbody tr:nth-child(odd) {
background: #fff;
}
.sizesTableContent:last-child .sizes tbody tr:nth-child(even) {
background: #ffffcc;
}
JSFiddle Example
#media only screen and (max-width: 480px) {
.sizesTableContent {
display:block !important;
width:100% !important;
}
.hider {
display: none;
}
.sizesTableContent:last-child .sizes tbody tr:nth-child(odd) {
background: #fff;
}
.sizesTableContent:last-child .sizes tbody tr:nth-child(even) {
background: #ffffcc;
}
}
.sizesAsterisk {
width:100%;
border-collapse: collapse;
text-align: left;
font-family: arial, helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
}
.hanging {
text-indent: -0.5em;
padding-left: 0.5em;
}
.sizesTableContent {
vertical-align: top;
}
.sizesTwoColumn {
width:100%;
border-collapse: collapse;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
.sizes {
border-collapse: collapse;
white-space: nowrap;
width: 100%;
text-align: center;
font-family: arial, helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
}
.sizes td:first-child {
text-align: left;
font-weight: bold;
}
.sizes th {
border-bottom: 1pt solid #000000;
vertical-align: bottom;
font-family: arial, helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
}
.sizes th:first-child {
text-align: left;
}
.sizes tbody tr:hover {
background: #D2DAE3;
}
.sizes tbody tr:nth-child(odd) {
background: #ffffcc;
}
.sizes tbody tr:nth-child(odd):hover {
background: #D2DAE3;
}
<table class="sizesAsterisk">
<tr>
<td>
<table class="sizesTwoColumn">
<tr>
<td class="sizesTableContent">
<table class="sizes" cellspacing="0" cellpadding="0">
<col width="33.3%">
<col width="33.3%">
<col width="33.4%">
<thead>
<tr>
<th>Size in
<br/>Inches</th>
<th>Lbs.
<br/>Per Ft</th>
<th>Est. Lbs.
<br/>Per 20' Bar</th>
</tr>
</thead>
<tbody>
<!--First column size data go between the tbody tags-->
<tr>
<td>1" x 1/4</td>
<td>.620</td>
<td>12.40</td>
</tr>
<tr>
<td>1-1/4 x 5/15</td>
<td>.960</td>
<td>19.20</td>
</tr>
<tr>
<td>1-1/2 x 5/16</td>
<td>1.180</td>
<td>23.60</td>
</tr>
</tbody>
</table>
</td>
<td class="hider" style="border-right: 1px solid #000000" width="14px"></td>
<td class="hider" width="14px"></td>
<td class="sizesTableContent">
<table class="sizes" cellspacing="0" cellpadding="0">
<col width="33.3%">
<col width="33.3%">
<col width="33.4%">
<thead class="hider">
<tr>
<th>Size in
<br/>Inches</th>
<th>Lbs.
<br/>Per Ft</th>
<th>Est. Lbs.
<br/>Per 20' Bar</th>
</tr>
</thead>
<tbody>
<!--Second column size data go between the tbody tags-->
<tr>
<td>1-1/2 x 7/16</td>
<td>1.560</td>
<td>31.20</td>
</tr>
<tr>
<td>1-3/4 x 7/16<span style="color:red"> *</span>
</td>
<td>1.910</td>
<td>38.20</td>
</tr>
<tr>
<td>2" x 1/2<span style="color:red"> *</span>
</td>
<td>2.587</td>
<td>51.74</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="hanging">
<!--Asterisk notes go between the td tags-->
<span style="color:red">* </span>Also in 10' Lengths.</td>
</tr>
</table>

Categories