Apply dynamic styling to datatables rows

Apply dynamic styling to datatables rows - javascript

I need to highlight a row in a DataTables.js data table whenever it is inactive. I have some code set up in my Razor to label the <tr> with an id of "Inactive" and in my CSS I have the background color set accordingly. However, I can't get anything but the orignal styling to appear.
CSS
/*
* Table styles
*/
table.pretty {
width: 100%;
clear: both;
}
table.pretty td#Inactive {
padding: 5px;
border: 1px solid #fff;
background-color: #FB9090;
}
table.pretty td,
table.pretty th {
padding: 5px;
border: 1px solid #fff;
}
/* Header cells */
table.pretty thead th {
background: #6699FF; /* #66a9bd; */
color: white;
}
/* Body cells */
table.pretty tbody th {
text-align: left;
background: black; /*#91c5d4; */
color: white;
}
table.pretty tbody td {
background: white; /* #d5eaf0; */
}
table.pretty tbody tr.odd td {
background: #e8eef4; /*#bcd9e1; */
}
/* Footer cells */
table.pretty tfoot th {
background: #b0cc7f;
text-align: left;
}
table.pretty tfoot td {
background: #d7e1c5;
text-align: center;
font-weight: bold;
}
tr#Inactive
{
background-color: #FB9090;
}
HTML (Rendered)
<tr id=Inactive style="vertical-align:top;">
<td style="width:200px;">
Name
</td>
<td>
Fixed
</td>
<td style="width:50px;">
test
who's testing
I am
who's that eh?
me
</td>
<td style="width:50px;">
109161
</td>
<td style="text-align:center">
<img src="/Content/Images/attachment.png" height="20px;" width="20px;"/>
</td>
<td nowrap>
</td>
<td nowrap>
</td>
<td style="text-align:center; max-width: 50px;">
</td>
<td>
<img src="/Content/Images/Pencil-icon.png" alt="edit" height="20px;" width="20px;"/><br />
<img src="/Content/Images/Actions-view-list-text-icon.png" alt="details" height="20px;" width="20px;"/><br />
<img src="/Content/Images/Actions-edit-delete-icon.png" alt="delete" height="20px;" width="20px;"/>
</td>
</tr>
jQuery
$("#thetable").dataTable({
"sPaginationType": "full_numbers",
"iDisplayLength": 100,
"oLanguage": {
"sSearch": "Filter results:"
}
});

If only one row is inactive at a time, I think you're looking for:
tr#Inactive td
{
background-color: #FB9090;
}

Related

CSS not loading when I call a div to print

I have a div that I would like to print, but when I call it, the CSS doesn't apply. I got the JS from here. It's supposed to print just the table, which it does, but It doesn't apply the styles for the table, and it ends up unformatted.
Expected result
Actual result
My code
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
.table-container {
display: grid;
grid-template-columns: auto;
justify-content: center;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
background-color: white;
color: black;
border: 2px solid black;
}
td,
th {
border: 1px solid black;
padding: 10px 20px;
}
th {
font-size: 20px;
}
td {
font-size: 15px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
.total1 {
border: none;
}
.pc-border-title {
text-align: center;
}
.intro-heading {
font-size: 25px;
text-align: center;
color: #ffffff;
}
.pcbuilder-link {
color: #cecece;
}
.pcbuilder-link:hover {
color: #adadad;
}
.table-heading {
font-size: 50px;
text-align: center;
color: #000000;
margin-bottom: 10px;
margin-top: 0px;
border: 2px solid #000000;
}
#printableArea {
padding: 10px;
background-color: #ffffff;
border-radius: 10px;
}
.table-container {
display: grid;
grid-template-columns: auto;
justify-content: center;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
background-color: white;
color: black;
border: 2px solid black;
}
td,
th {
border: 1px solid black;
padding: 10px 20px;
}
th {
font-size: 20px;
}
td {
font-size: 15px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
.total1 {
border: none;
}
.pc-border-title {
text-align: center;
}
.intro-heading {
font-size: 25px;
text-align: center;
color: #ffffff;
}
.pcbuilder-link {
color: #cecece;
}
.pcbuilder-link:hover {
color: #adadad;
}
.table-heading {
font-size: 50px;
text-align: center;
color: #000000;
margin-bottom: 10px;
margin-top: 0px;
border: 2px solid #000000;
}
#printableArea {
padding: 10px;
background-color: #ffffff;
border-radius: 10px;
}
<div id="printableArea">
<h3 class="table-heading" contenteditable="true">My PC Setup</h3>
<table spellcheck="false">
<tr>
<!--https://pcbuilder.net/rigs/aK6rMH/-->
<th>Part</th>
<th>Name</th>
<th>Price</th>
<th>Notes</th>
</tr>
<tr>
<td>Processor</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">AMD Ryzen 9 7950X
</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)" class="price">
747</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">
32-Thread<br>16-Core<br>4.5GHz</td>
</tr>
<tr>
<td>Motherboard</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">GIGABYTE X670E AORme Master
</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)" class="price">
542.84</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">Socket: AM5
<br>RAM Slots: 4<br>Chipset: AMD X670E</td>
</tr>
<tr>
<td>CPU Cooler</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">Cooler Master Hyper 212 EVO V2</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)" class="price">
90</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">Side Panel: Tempered Glass, Steel<br>Cabinet Type: ATX Full Tower</td>
</tr>
<tr>
<tr>
<td>Case</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">NZXT H510 - CA-H510B-B1
</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)" class="price">
1,584.90</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">Memory: 24GB
<br>Chipset: GeForce RTX 3090 Ti<br>Interface: PCIe 4.0 x16</td>
</tr>
<tr>
<td>Graphics card</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">Nvidia RTX 3090 TI Founders Edition</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)" class="price">
51.44</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">Fan Speed: 650RPM-1800RPM
<br>Noise Level: 8-27dBA</td>
</tr>
<tr>
<td>RAM</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">G.Skill Trident Z5 RGB Series 32GB 2 x 16GB (x2)</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)" class="price">
564.42</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">RAM Size: 64GB
<br>RAM Type: DDR5</td>
</tr>
<tr>
<td>Storage (SSD)</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">Samsung EVO 970 1TB
</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)" class="price">
167.99</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">Capacity: 1 TB
<br>Type: SSD<br>Cache Memory: 1024 MB</td>
</tr>
<tr>
<td>Storage (HDD)</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">Seagate BarraCuda 2TB
</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)" class="price">
53.49</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">Capacity: 2 TB
<br>Type: HDD<br>RPM: 7200 RPM<br>Interface: SATA 6 Gb/s<br>Cache Memory: 256 MB</td>
</tr>
<tr>
<td>Case Cooler</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">ARCTIC P12
</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)" class="price">
5.73</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">Fan RPM: 1800 RPM
<br>Airflow: 56.3 CFM<br>Noise Level: N/A</td>
</tr>
<tr>
<td>Power Supply</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">Thermaltake Smart 430W
</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)" class="price">
98.95</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">Power: 430W
<br>Efficiency: 80+</td>
</tr>
<tr>
<td>Monitor</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">Acer SB220Q Bi 21.5
</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)" class="price">
170</td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)">Screen Size: 21.5"
<br>Response Time: 4ms<br>Resolution: 1920 x 1080<br>Refresh Rate: 75 Hz</td>
</tr>
<tr>
<td class="total1"><b>Total</b></td>
<td class="total1"></td>
<td class="total1"></td>
<td contenteditable="true" onclick="document.execCommand('selectAll',false,null)" class="price">
<b>4,077</b>
</td>
</tr>
</table>
</div>
<br>
<input type="button" onclick="printDiv('printableArea')" value="Print your setup" />
How can I fix this? Thanks

I faced similar problem while printing table using similar javascript function. You have to provide all css to the print window as well. I am pasting my code here. You will have to modify that to suit your requirements.
function PrintElem(elem)
{
var orgPrint = document.getElementById(elem).innerHTML;
document.querySelectorAll(".no-print").forEach(el => el.remove()); // removes some elements from the table that are not to be pronted
var toPrint = document.getElementById(elem).innerHTML;
var mywindow = window.open('', 'PRINT', 'height=400,width=600');
mywindow.document.write('<html><head><title>My Title</title>');
mywindow.document.write('<style>');
mywindow.document.write('* { font-family: Roboto, \'Segoe UI\', Tahoma, sans-serif; }');
mywindow.document.write('#invTable { border-collapse: collapse; width: 100%; }');
mywindow.document.write('#invTable td, #invTable th { border: 1px solid #ddd; padding: 8px; }');
mywindow.document.write('.text-end { text-align: right !important; }');
mywindow.document.write('.text-center {text-align: center !important; }');
mywindow.document.write('body { display: flex; flex-direction: column;}');
mywindow.document.write('.print-footer { margin-top: auto; position:fixed; bottom:0;text-align: center; width:100%; border-top: 1px solid #ddd; }');
mywindow.document.write('</style>');
mywindow.document.write('</head><body >');
mywindow.document.write('<br/><br/><br/>');
mywindow.document.write(toPrint);
mywindow.document.write('</body></html>');
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10*/
mywindow.print();
mywindow.close();
document.getElementById(elem).innerHTML = orgPrint; // restores the table as is
return true;
}

Filter is not showing right categories

I need to make work filter based on last column. Last Column is Category and when I press in option>select I need to show just that one category and hide others, but for now when I click nothing happen and don't have idea why.
highlightRows = () => {
let oddRows = document.querySelectorAll('tbody > tr.show')
oddRows.forEach((row, index)=> {
if (index % 2 == 0) {
row.style.background = '#f1f1f1'
} else {
row.style.background = '#fff'
}
})
}
const filterOptions = () => {
const option = document.querySelector("#filter").value;
const selection = option.replace('&', '')
const rows = document.querySelectorAll("#body1 > tr");
console.log(rows.length);
rows.forEach(row => {
let td = row.querySelector("td:last-child");
let filter = td.innerText.replace('&', '');
if (filter === selection) {
row.className = 'show'
} else {
row.className = 'hidden'
}
});
highlightRows()
};
document.getElementById("filter").addEventListener("change", filterOptions);
table.vypis {
border: 1px solid #ccc;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
table-layout: fixed;
}
table.vypis > caption {
font-size: 1.5em;
margin: .5em 0 .75em;
}
table.vypis > tr.vypis-riadok {
background-color: #f8f8f8;
border: 1px solid #ddd;
padding: .35em;
}
table.vypis th,
table.vypis td {
padding: .625em;
text-align: center;
}
table.vypis th {
font-size: .85em;
letter-spacing: .1em;
text-transform: uppercase;
}
#media screen and (max-width: 800px) {
table.vypis {
border: 0;
}
table.vypis > caption {
font-size: 1.3em;
}
table.vypis > thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
table.vypis tr {
border-bottom: 3px solid #ddd;
display: block;
margin-bottom: .625em;
}
table.vypis td {
border-bottom: 1px solid #ddd;
display: block;
font-size: .8em;
text-align: right;
}
table.vypis td::before {
/*
* aria-label has no advantage, it won't be read inside a table
content: attr(aria-label);
*/
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table.vypis td:last-child {
border-bottom: 0;
}
}
<div class="table-filters">
<select id="filter">
<option disabled selected value="none">Categories</option>
<option>Home</option>
<option>Others</option>
<option>Hobby</option>
<option>Garden</option>
</select>
</div>
<table class="vypis">
<caption>Account</caption>
<thead>
<tr>
<th scope="col">Referencia</th>
<th scope="col">Dátum</th>
<th scope="col">Suma</th>
<th scope="col">Kategória</th>
</tr>
</thead>
<tbody class="body1">
<tr class="vypis-riadok">
<td scope="row" data-label="Referencia">[[X04_textovy_popis_obycajne]]</td>
<td data-label="Dátum">[[X02_riadok_1_datum]]</td>
<td data-label="Suma">[[X08_riadok_1_suma]] €</td>
<td data-label="Kategória">[[kategoria]]</td>
</tr>
<tr class="vypis-riadok">
<td scope="row" data-label="Referencia">[[X04_textovy_popis_obycajne]]</td>
<td data-label="Dátum">[[X02_riadok_1_datum]]</td>
<td data-label="Suma">[[X08_riadok_1_suma]] €</td>
<td data-label="Kategória">Garden</td>
</tr>
<tr class="vypis-riadok">
<td scope="row" data-label="Referencia">[[X04_textovy_popis_obycajne]]</td>
<td data-label="Dátum">[[X02_riadok_1_datum]]</td>
<td data-label="Suma">[[X08_riadok_1_suma]] €</td>
<td data-label="Kategória">Home</td>
</tr>
<tr class="vypis-riadok">
<td scope="row" data-label="Referencia">[[X04_textovy_popis_obycajne]]</td>
<td data-label="Dátum">[[X02_riadok_1_datum]]</td>
<td data-label="Suma">[[X08_riadok_1_suma]] €</td>
<td data-label="Kategória">Hobby</td>
</tr>
</tbody>
</table>

the problem is in your query for tbody you write #body1 so it will query element with ID body1 while in your html code, tbody is with class body1 not id
const rows = document.querySelectorAll("#body1 > tr"); // <--- will select element with id="body1"
your HTML code:
...
</thead>
<tbody class="body1"> <!--body is using attribute class -->
<tr class="vypis-riadok">
...
what you should do is use class query selector, change # into .
const rows = document.querySelectorAll(".body1 > tr"); // <--- will select element with class="body1"
after that your javascript code should be fine, now add css style for show and hidden class
.hidden{
display: none;
}

should be because I got defined select by ID

CSS messed up in mobile view

I have a simple nested table. Three columns - Name, Email,Contact. In the contact column, I have have two contact separated by a . This table gets stacked in the form of one row below the another in the mobile view.
Problem : Since the two contact numbers are separated by a break, in the mobile view it adds a huge space between the column headings. I just want to pick up "contact" heading in mobile(and not touch the numbers) and move it a little to reduce the space in between. Right now, whatever css I apply it moves the contact numbers along with it. Please suggest how can I do this ?
$(function() {
$(".fold-table tr.view").on("click", function() {
$(this).toggleClass("open").next(".fold").toggleClass("open");
});
});
$('.view, table.child').each(function() {
$('.view:even, table.child:even').addClass('odd');
$('.view:odd, table.child:odd').addClass('even');
});
.tableComponent table.parent {
font-family: 'Poppins';
font-size: 12px;
width: 60%;
border: none;
border-collapse: separate;
border-spacing: 0 2px;
}
.tableComponent table thead th {
border-bottom: 0;
border-top: 0;
}
.tableComponent table td,
th {
border-top: 0px;
}
table.fold-table>tbody>tr.view td,
table.fold-table>tbody>tr.view th {
cursor: pointer;
}
table.fold-table>tbody>tr.fold {
display: none;
}
table.fold-table>tbody>tr.fold.open {
display: table-row;
}
.odd {
background-color: #F2F2F2;
}
.even {
background-color: #F8F8F8
}
table.child {
font-family: 'Poppins';
font-size: 12px;
width: 100%;
margin-top: -0.1rem;
border-top: 2px solid #DBDBDB;
}
table.fold-table>tbody>tr.fold.open>td {
padding: 0;
}
#media all and (max-width: 500px) {
.tableComponent table.parent {
width: 90%;
margin-left: 5vw
}
.tableComponent thead {
display: none;
}
.tableComponent tr {
display: flex;
flex-direction: column;
margin-bottom: 5px;
}
.tableComponent td::before {
content: attr(col);
font-weight: bold;
padding-right: 20px;
width: 40vw;
display: inline-block;
}
table.child {
margin-top: -0.5rem;
}
.contactInfo {
display: inline-block;
margin-left: -0.2rem;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tableComponent">
<table class="table fold-table parent" id="table">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">Contact</th>
</tr>
</thead>
<tbody>
<tr class="view">
<td col="Name">John</td>
<td col="Email">j#g.com</td>
<td col="Contact">
<span class="contactInfo">
35373726<br>
35373726
</span>
</td>
</tr>
<tr class="fold">
<td colspan="3">
<div class="fold-content">
<table class="child">
<tbody>
<tr>
<td col="Name">SUB Data 1</td>
<td col="Email">SUB Data 1</td>
<td col="Contact">SUB Data 1
</td>
</tr>
<tr>
<td col="Name">SUB Data 1</td>
<td col="Email">SUB Data 1</td>
<td col="Contact">SUB Data 1
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>

In css, the inline elements doesn't take margins, so vertical alignment can be done like so
#media all and (max-width: 500px){
.tableComponent td::before {
vertical-align: top;
}
}

If you change the col="Contact" td into a flexbox, it will behave the way you want it at that screen size.
[col="Contact"] {
display: flex;
}

Create zebra striping effect on table

I am trying to add zebra strips to the table by using following code but its not working. When used inspect element the border of the table is not working. And also cannot see the zebra effect on the table.
<body>
<div class="table_style">
<table border="true">
<tr>
<th>Student Name</th>
<th>Marks in Science</th>
</tr>
<tr>
<td>Janet</td>
<td>85.00</td>
</tr>
<tr>
<td>David</td>
<td>92.00</td>
</tr>
<tr>
<td>Arthur</td>
<td>79.00</td>
</tr>
<tr>
<td>Bill</td>
<td>82.00</td>
</tr>
</table>
</div>
</body>
.table_style {
width: 500px;
margin: 0px auto;
}
table {
width: 100%;
border-collapse: collapse;
}
table tr td {
width: 50%;
border: 1px solid #D0FSA9;
padding: 5px;
}
table tr th {
border: 1px solid #D0FSA9;
padding: 5px;
}
.zebra {
background-color: #D0FSA9;
}
.zebra1{
background-color: #E0FSA0;
}
$(document).ready(function(){
$("tr:odd").addClass("zebra");
$("tr:even").addClass("zebra1");
});

Try this,
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
Plain css will do this.... no Javascript is needed

You can use the nth-child(even) instead of using jQuery.
Also, your hex values are invalid that's why he is not applying the color.
Why are they invalid ? Because they have an S on it.
The only valid characters in a hex color are:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
So, use nth-child(even) and nth-child(odd) and apply valid hex values in the colors.
table tr:nth-child(odd) {
background-color: red;
}
table tr:nth-child(even) {
background-color: blue;
}
table tr:first-child {
background-color: transparent; /*headers*/
}
<div class="table_style">
<table border="true">
<tr>
<th>Student Name</th>
<th>Marks in Science</th>
</tr>
<tr>
<td>Janet</td>
<td>85.00</td>
</tr>
<tr>
<td>David</td>
<td>92.00</td>
</tr>
<tr>
<td>Arthur</td>
<td>79.00</td>
</tr>
<tr>
<td>Bill</td>
<td>82.00</td>
</tr>
</table>
</div>

It will not work because you used 'S' in the rgb.
RGB only range from A TO F and 0 to 9
just change the background color of class zebra and zebra1
.table_style {
width: 500px;
margin: 0px auto;
}
table {
width: 100%;
border-collapse: collapse;
}
table tr td {
width: 50%;
border: 1px solid #D0F3A9;
padding: 5px;
}
table tr th {
border: 1px solid #D0F3A9;
padding: 5px;
}
.zebra {
/*background-color: #D0F3A9;*/
background-color: blue;
}
.zebra1{
/*background-color: #D0ffA9;*/
background-color: green;
}

adjust columns of a table in HTML

I want to have a table, such that if the width of the page decreases the columns of the table should be displayed one below the other.

You can use CSS display properties to alter the way the table behaves. In order to make the table cells sit one on top of the other, you need to create a media query which will set the table and each cell to be display: block at the break point that best suits your needs.
In the example below the table cells will wrap when the screen width shrinks to 500px.
Example
#media (max-width: 500px) {
table {
display: block;
border: solid 1px #f00;
}
table td {
display: block;
border: solid 1px #f00;
}
}
<table>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
Explanation
By default a table tag uses display: table and a table cell uses display: table-cell. By changing these properties we can alter the way the table is displayed.
For more information on display properties see this article:
https://developer.mozilla.org/en-US/docs/Web/CSS/display
For more information on media queries see the following article:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Alright if i understand correctly you want something like this:
http://codepen.io/geoffyuen/pen/FCBEg
This Solution wil make your table responsive so it can do what you are trying to do(at leat i think i know what youre trying to do)
Just some example html code
<h1>RWD List to Table</h1>
<table class="rwd-table">
<tr>
<th>Movie Title</th>
<th>Genre</th>
<th>Year</th>
<th>Gross</th>
</tr>
<tr>
<td data-th="Movie Title">Star Wars</td>
<td data-th="Genre">Adventure, Sci-fi</td>
<td data-th="Year">1977</td>
<td data-th="Gross">$460,935,665</td>
</tr>
<tr>
<td data-th="Movie Title">Howard The Duck</td>
<td data-th="Genre">"Comedy"</td>
<td data-th="Year">1986</td>
<td data-th="Gross">$16,295,774</td>
</tr>
<tr>
<td data-th="Movie Title">American Graffiti</td>
<td data-th="Genre">Comedy, Drama</td>
<td data-th="Year">1973</td>
<td data-th="Gross">$115,000,000</td>
</tr>
</table>
Then we have our CSS
#import "compass/css3";
// More practical CSS...
// using mobile first method (IE8,7 requires respond.js polyfill https://github.com/scottjehl/Respond)
$breakpoint-alpha: 480px; // adjust to your needs
.rwd-table {
margin: 1em 0;
min-width: 300px; // adjust to your needs
tr {
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
th {
display: none; // for accessibility, use a visually hidden method here instead! Thanks, reddit!
}
td {
display: block;
&:first-child {
padding-top: .5em;
}
&:last-child {
padding-bottom: .5em;
}
&:before {
content: attr(data-th)": "; // who knew you could do this? The internet, that's who.
font-weight: bold;
// optional stuff to make it look nicer
width: 6.5em; // magic number :( adjust according to your own content
display: inline-block;
// end options
#media (min-width: $breakpoint-alpha) {
display: none;
}
}
}
th, td {
text-align: left;
#media (min-width: $breakpoint-alpha) {
display: table-cell;
padding: .25em .5em;
&:first-child {
padding-left: 0;
}
&:last-child {
padding-right: 0;
}
}
}
}
// presentational styling
#import 'http://fonts.googleapis.com/css?family=Montserrat:300,400,700';
body {
padding: 0 2em;
font-family: Montserrat, sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
color: #444;
background: #eee;
}
h1 {
font-weight: normal;
letter-spacing: -1px;
color: #34495E;
}
.rwd-table {
background: #34495E;
color: #fff;
border-radius: .4em;
overflow: hidden;
tr {
border-color: lighten(#34495E, 10%);
}
th, td {
margin: .5em 1em;
#media (min-width: $breakpoint-alpha) {
padding: 1em !important;
}
}
th, td:before {
color: #dd5;
}
}
Hope this helps you

Develop Reference

JavaScript is the programming language of the Web.

Apply dynamic styling to datatables rows - javascript

If only one row is inactive at a time, I think you're looking for: tr#Inactive td { background-color: #FB9090; }

Related

CSS not loading when I call a div to print

Filter is not showing right categories

CSS messed up in mobile view

Create zebra striping effect on table

adjust columns of a table in HTML

Categories

Resources