Develop Reference

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;
}

I want to change text strokes on hover ... how can i?

In the initial state the fonts should be the same color, i.e black or other color, but when someone hovers on one p text the hover text should change its color and the rest of them change it into strokes while text-color is transparent and vice-versa,
When I hover out on the text it should go back to its normal color. I want to apply this in CMS content so it needs to take a dynamic values, if not dynamic but needed to at least change the colors and strokes.
.style1 {
font-size: 30px;
position: absolute;
}
.Ancestors {
width: 500px;
height: 500px;
font-size: 30px;
text-align: center;
background: #00f;
color: rgba(0, 0, 0, 0);
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: white;
}
.overAncestors {
width: 500px;
height: 500px;
font-size: 30px;
text-align: center;
color: black;
}
<table border="0" cellpadding="10" cellspacing="100" summary="">
<tr>
<td>
<span class="style1" valign="middle" onmouseover="this.className='overAncestors';" onmouseout="this.className='Ancestors';">vita</span>
</td>
<td>
<span class="style1" valign="middle" onmouseover="this.className='overAncestors';" onmouseout="this.className='Ancestors';">mege</span>
</td>
<td>
<span class="style1" valign="middle" onmouseover="this.className='overAncestors';" onmouseout="this.className='Ancestors';">Hita</span>
</td>
<td>
<span class="style1" valign="middle" onmouseover="this.className='overAncestors';" onmouseout="this.className='Ancestors';">nitml</span>
</td>
<td>
<span class="style1" valign="middle" onmouseover="this.className='overAncestors';" onmouseout="this.className='Ancestors';">rage</span>
</td>
</tr>
</table>

The main problem with your code is that once the class Ancestors is added to the <span> tags, it is never removed again.
You can use jquery's hover() to adjust the span classes whenever there is a mouse over and mouse out event.
This is the idea of the algorithm:
$('.style1').hover(function(){
//mouse over...
//Add class 'overAncestor' in the span hovered
//Add class 'Ancestor' in the other spans
}, function(){
//mouse out...
//Remove class 'Ancestor' and 'overAncestor' of all spans
});
This is a snippet of the working code:
$(document).ready(function(){
$('.style1').hover(function(){
$('.style1').addClass('Ancestors');
$(this).addClass('overAncestors').removeClass('Ancestors');
}, function(){
$('.style1').removeClass('Ancestors').removeClass('overAncestors');
});
});
.style1 {
font-size: 30px;
position: absolute;
}
.Ancestors {
font-size: 30px;
text-align: center;
background: #00f;
color: rgba(0, 0, 0, 0);
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: white;
}
.overAncestors {
font-size: 30px;
text-align: center;
color: black;
}
<table border="0" cellpadding="10" cellspacing="100" summary="">
<tr>
<td>
<span class="style1" valign="middle">vita</span>
</td>
<td>
<span class="style1" valign="middle">mege</span>
</td>
<td>
<span class="style1" valign="middle">Hita</span>
</td>
<td>
<span class="style1" valign="middle">nitml</span>
</td>
<td>
<span class="style1" valign="middle">rage</span>
</td>
</tr>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Syntax error from copy to clipboard command = unable to copy Text and template

Good day.
I've been trying top figure out why the copy to clipboard not working despite of putting the correct form name, please advise what would be the best command, i've been trying so hard couldn't seem to make it work.
here is the sample of the form or template im working on
I was hoping to use the copy to clipboard function so i can copy the title and content of each line
if (window.event.srcElement == frm.copyform){
frm.holdtext.value = Template;
Copied=frm.holdtext.createTextRange();
Copied.execCommand('copy');
alert('Copied to Clipboard!');
}
<script>
<script> }
if (window.event.srcElement == frm.copyform){
frm.holdtext.value = Template;
Copied=frm.holdtext.createTextRange();
Copied.execCommand('copy');
alert('Copied to Clipboard!');
}
}
</SCRIPT>
<head>
<body>
<!--Special comment-->
<!--Style-->
<style type="text/css">
/* Some Generic styles */
H1 {
Color: #9c33ff;
font-size: 20px;
isplay: inline-block;
}
H2 {
font-size: 15px;
Color: #751aff;
font-size: 13px;
}
Body {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 580px;
height: 800px;
border: none;
font: normal 12px/1 "Trebuchet MS", Helvetica, sans-serif;
color: rgba(2,2,2,1);
text-align: center;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
background: -webkit-linear-gradient(-45deg, rgba(153,103,206,1) 0, rgba(247,221,200,0.57) 49%, rgba(140,226,226,1) 100%);
background: -moz-linear-gradient(135deg, rgba(153,103,206,1) 0, rgba(247,221,200,0.57) 49%, rgba(140,226,226,1) 100%);
background: linear-gradient(135deg, rgba(153,103,206,1) 0, rgba(247,221,200,0.57) 49%, rgba(140,226,226,1) 100%);
background-position: 50% 50%;
-webkit-background-origin: padding-box;
background-origin: padding-box;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-background-size: auto auto;
background-size: auto auto;
}
label{
display: inline-block;
float: left;
clear: left;
width: 250px;
text-align: Left;
}
input {
display: inline-block;
float: center;
}
TBODY {
font-size: 14px;
Color: #313133;
font-size: 13px;
}
#tickettemplate {
font-size: 15px;
Color: #313133;
font-size: 13px;
}
</style>
<!--Html starting point-->
<h1>i</h1>
<h2>i</h2>
<P align=center><IMG
src="" alt="" width="80" height="83"></P>
<FORM name=tickettemplate id=tickettemplate>
<!-- Table to contain page title and buttons -->
<TABLE>
<TBODY>
<TR>
<TD align=center colSpan=4>
<DIV></DIV></TD></TR>
<TR>
<TD><INPUT name=Reset onclick="resetForm();return false;" type=reset value="Clear All Fields">
</TD>
<TD><INPUT name=copyform onclick="val1();return false;" type=button value="Copy to Clipboard">
</TD></TR></TBODY></TABLE><!-- Table for General information --><BR>
<!--This is where i started-->
<TABLE
style="FONT-SIZE: 13pt; BORDER-TOP: gray solid; BORDER-RIGHT: gray solid; BORDER-BOTTOM: gray solid; BORDER-LEFT: gray solid"
14pt? FONT-SIZE:><STRONG>General Info</STRONG></TD></TR>
<TBODY>
<TR>
<TD vAlign=middle>Name:</TD>
<TD><INPUT name=cname_singleuser id=cname_singleuser size=50>
</TD>
<TR>
<TD vAlign=middle>User ID:</TD>
<TD><INPUT name=userid_singleuser0 id=userid_singleuser0 size=50> </TD></TR>
<TR>
<TD vAlign=top>Callback no.: </TD>
<TD><INPUT name="callback no" id=callbackno0 size=50></TD></TR>
<TR>
<TD vAlign=middle>Email Address:</TD>
<TD><INPUT name=emailaddy_singleuser id=emailaddy_singleuser
size=50></TD></TR>
<TR>
<TD vAlign=middle>Office Location</TD>
<TD><INPUT name=oloc_singleuser id=oloc_singleuser
size=50></TD></TR>
<TR>
<TD vAlign=middle>Current Location:</TD>
<TD><INPUT name=cloc_singleuser id=cloc_singleuser
size=50></TD></TR>
<TR>
<TD vAlign=middle>Exisitng/Related:</TD>
<TD><INPUT name=exrelated_singleuser id=exrelated_singleuser
size=50></TD></TR>
<TD vAlign=top>Business Unit/Client:</TD>
<TD><INPUT name=client1 id=client1 size=50> </TD></TR></TBODY></TABLE><BR>
<TABLE width=750 cellSpacing=0 cellPadding=0>
<TBODY>
<TABLE
style="FONT-SIZE: 13pt; BORDER-TOP: gray solid; BORDER-RIGHT: gray solid; BORDER-BOTTOM: gray solid; BORDER-LEFT: gray solid"
14pt? FONT-SIZE:><STRONG>Brief Description</STRONG></TD></TR>
<TBODY>
<TR>
<TD vAlign=middle>Issue: </TD>
<TD><INPUT name=Issue id=issue0 size=50></TD></TR>
<TR>
<TD vAlign=top>Number of Users Affected: </TD>
<TD><INPUT name="Number of users Affected" id=numberofusers0
size=50></TD></TR>
<TR>
<TD vAlign=top>Business Impact:</TD>
<TD><SELECT name="Business Impact" id=businessimpact0 size=1 type="text">
<OPTION value="" selected></OPTION> <OPTION value=Minor>P4
Minor</OPTION> <OPTION value=Medium>P3 Medium</OPTION> <OPTION
value=High>P2 High</OPTION> <OPTION value=Major>P1
Major</OPTION></SELECT> </TD></TR>
<TR>
<TD width=400 vAlign=top><p>Additional information/
Incident Description:</p></TD>
<TD><TEXTAREA name=Description id=Description1 rows=8 cols=60 wrap=virtual></TEXTAREA></TD></TR></TBODY></TABLE>
<TABLE width=750>
<TBODY>
<TR><BR><STRONG>Choose the Category:</STRONG></TR></TBODY></TABLE>

Not sure where you got that code from, but seems to be wrong. If you are copying the text from an input it is pretty straight forward. Focus, select, and copy from a click action.
function copy(event) {
var selector = event.target.getAttribute('data-copy')
var elem = document.querySelector(selector)
elem.focus()
elem.select()
document.execCommand('copy')
}
document.querySelectorAll('[data-copy]').forEach( function () {
this.addEventListener('click', copy)
})
<textarea id="foo">Hello world</textarea>
<button type="button" id="btnCopy1" data-copy="#foo">copy</button>
<hr/>
<textarea id="bar">Hello world</textarea>
<button type="button" id="btnCopy2" data-copy="#bar">copy</button>

Button Coloring

I've made 4 buttons that each link to a different table.
I'm having trouble individually coloring each button using css... For example, I'd like the first button to be red and the second to be blue, ect.
I really appreciate the help. Thanks.
link to demo: http://jsfiddle.net/LpLhP/8/
html:
<a class="button" data-table="1" href="#">Slifer Level</a>
<a class="button" data-table="2" href="#">Ra Level</a>
<a class="button" data-table="3" href="#">Obelisk Level</a>
<a class="button" data-table="4" href="#">Exodia Level</a>
<table id="1">
<thead>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</thead>
<tbody>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</tbody>
</table>
<table id="2">
<thead>
<tr>
<td>Sport</td>
<td>Gender</td>
<td>Hair Color</td>
</tr>
</thead>
<tbody>
<tr>
<td>Baseball</td>
<td>Female</td>
<td>Blonde</td>
</tr>
<tr>
<td>Curling</td>
<td>Female</td>
<td>Brown</td>
</tr>
<tr>
<td>Hockey</td>
<td>Male</td>
<td>Black</td>
</tr>
</tbody>
</table>
<table id="3">
<thead>
<tr>
<td>Favorite TV Show</td>
<td>Favorite Band</td>
<td>Favorite Food</td>
</tr>
</thead>
<tbody>
<tr>
<td>How I Met Your Mother</td>
<td>Panic At The Disco</td>
<td>Pizza</td>
</tr>
<tr>
<td>Lost</td>
<td>Fall Out Boy</td>
<td>Steak</td>
</tr>
<tr>
<td>The Office</td>
<td>OneRepublic</td>
<td>Waffles</td>
</tr>
</tbody>
</table>
<table id="4">
<thead>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</thead>
<tr>
<td>How I Met Your Mother</td>
<td>Panic At The Disco</td>
<td>Pizza</td>
<td>1</td>
css:
body{
font-family: sans-serif;
font-size: 16px;
line-height: 1.5em;
text-align: center;
margin-top: 1.5rem;
}
a{
margin: 0.5rem;
}
a.button{
background-color: #ed8c15;
color: white;
padding: 0.5rem;
border-radius: 5px;
text-decoration: none;
&:hover{
background-color: darken(tomato, 10%);
}
}
table{
width: 80%;
margin: 2em auto;
border: 2px solid black;
}
tr:nth-child(even){
background-color: #F7F7F7;
}
thead{
background-color: darkgrey;
}
th{
padding: 0.75em 0;
}
td{
padding: 0.7em 1em;
}
java:
(function () {
var tables = $("table");
//Grabs all the tables
tables.hide().first().show();
//Hides all the tables except first
$("a.button").on("click", function () {
//Adds eventListner to buttons
tables.hide();
//Hides all the tables
var tableTarget = $(this).data("table");
//Gets data# of button
$("table#" + tableTarget).show();
//Shows the table with an id equal to data attr of the button
})
})();

use nth:child() selector in your css as
a.button:nth-child(2){
background-color: #4679BD;
}
http://jsfiddle.net/LpLhP/17/

Give each 'button class' a fellow class such as the following:
<a class="button red" data-table="1" href="#">Slifer Level</a>
<a class="button blue" data-table="2" href="#">Ra Level</a>
<a class="button green" data-table="3" href="#">Obelisk Level</a>
<a class="button yellow" data-table="4" href="#">Exodia Level</a>
Then, give the CSS for each new class you defined
.red { color: red; }
.blue { color: blue; }
.green { color: green; }
.yellow { color: yellow; }

there are several ways to do this, the easiest is to make an extra class
<button class="button red"></button>
.red{
background-color:red;
}
button:nth-of-type(1) <--- First Button Styling

Try This
a.button[data-table="1"]{background-color:red ;}
a.button[data-table="2"]{background-color: blue;}
a.button[data-table="3"]{background-color: green;}
a.button[data-table="4"]{background-color: black;}
DEMO

why not add css
a.button:nth-child(1){
background-color:red;
}
a.button:nth-child(2){
background-color:blue;
}

<a class="buttona" data-table="1" href="#">button1</a>
<a class="buttonb" data-table="2" href="#">button2</a>
<a class="buttonc" data-table="3" href="#">button3</a>
<a class="buttond" data-table="4" href="#">button4</a>
.buttona{
background-color: #ed8c15;
color: white;
padding: 0.5rem;
border-radius: 5px;
text-decoration: none;
&:hover{
background-color: darken(tomato, 10%);
}
}
.buttonb{
background-color: blue;
color: white;
padding: 0.5rem;
border-radius: 5px;
text-decoration: none;
&:hover{
background-color: red;
}
}
Use Different CSS for each button like this.
Change the background-color and the hover background-color.

<style>
#red{
background-color: red;
}
#blue{
background-color: blue;
}
#green{
background-color: green;
}
.button{
color: #fff;
padding: .5rem;
border-radius: 5px;
text-decoration: none;
}
</style>
<a class="button" id="red" data-table="2" href="#">button2</a>
<a class="button" id="blue" data-table="2" href="#">button2</a>
<a class="button" id="grren" data-table="2" href="#">button2</a>

Try this.
Hope this helps.
give individual ids to buttons.
<a class="button" id="button1" data-table="1" href="#">button1</a>
<a class="button" id="button2" data-table="2" href="#">button2</a>
<a class="button" id="button3" data-table="3" href="#">button3</a>
<a class="button" id="button4" data-table="4" href="#">button4</a>
Working Demo

Data table is a pretty good way to target too, but this is probably more versatile site wide. nth of type is great for lists and stuff, but I doubt you'll get much reuse out of it in this situation. You also don't really need adjacent selectors like a.red-button etc.
I'd go with a site wide button style and then block element modifier style.
Here is a fiddle too:
HTML
Button
<button class="button">Button</button>
<input type="submit" class="button" value="button" />
CSS
.button { /* button reset - base */
display: inline-block; /* makes sure you can use margin-top etc */
border: 0; outline: 0; /* overrides defaults */
margin: 0; padding: 0;
border-radius: 0; /* overrides defaults */
background: gray; /* overrides background image */
font-family: inherit; /* gets parent font */
color: inherit; /* gets parent color */
text-align: center;
text-decoration: none;
-webkit-appearence: none; /* removes ios styling defaults */
-moz-appearence: none;
appearence: none;
cursor: pointer;
font-size: 1.2em;
padding: .5em .7em
}
/* specific styles */
.light {
background: red;
}
.dark {
background: purple;
}
.selector {
background: color;
}
.big-button {
font-size: 1.6em; /* etc. */
}
now, use those styles with the data table if you want - I see you are using sass - so you can exted these "mini-themes" to buttons, or divs or whatever and reuse common color combinations
.button[data-table="1"] {
#extend .light;
}
or
a[data-table="1"] {
#extend .dark;
#extend .big-button;
}
/* or make them #mixins and #include them if that suits you better */

unwanted lines in table when collapsing tr in IE

I have a table with expand/collapse javascript acting on the class value assigned to tr.
See below html code.
This all works fine in Chrome, but in IE when I expand and then collapse the www row, I get additional unwanted lines in the xxx and zzz rows. The lines look like they are borders (see css td border-style definition). It looks as if the borders of the collapsed and hidden rows are still shown (non-button rows are a little less high than the button rows, apparently because of standard button padding and border widths).
Why is this, and how can I prevent this from occurring?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<style type="text/css">
body, p {
background-color: white;
font-family: Verdana;
font-size: 10pt;
font-style: normal;
color: black;
margin-bottom: 4.5pt;
margin-top: 0pt;
}
table {
border: solid black 1pt;
border-collapse: collapse;
padding: 0;
border-spacing: 0;
}
th {
background: rgb(255, 255, 153);
border-style: solid;
border-color: black;
border-width: 1pt;
padding: 0cm 5pt;
color: black;
font-family: Verdana;
font-size: 10pt;
font-style: normal;
vertical-align: top;
}
td {
border-style: dotted dotted none none;
border-color: black;
border-width: 1pt;
padding: 0cm 5pt;
color: black;
font-style: normal;
font-family: Verdana;
font-size: 10pt;
vertical-align: top;
margin-bottom: 4.5pt;
margin-top: 0pt;
}
input.buttonSeq {
color: blue;
background: ffffcc;
border: none;
margin-left:0pt;
margin-top: 0px;
margin-bottom: 0px;
font-size: 100%;
}
</style>
<script type="text/javascript" language="javascript">
//expand and collapse tr functions based on class
function ToggleTRbyClass(clss){
var trs = document.getElementsByTagName('tr');
for (var i=0; i!=trs.length; i++) {
if (trs[i].className == clss) {
if ( trs[i].style.display == "none")
{
trs[i].style.display = "table-row"
}
else {
trs[i].style.display = "none"
}
}
}
return true;
}
</script>
</head>
<body>
<br><br>
<table style="table-layout:fixed word-break:break-all">
<col width="120">
<thead>
<tr>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr bgcolor="ffffcc">
<td align="left" style="font-style:italic; font-weight: bold">
<div><input type="button" class="buttonSeq" onclick="ToggleTRbyClass('www'); return true;" onMouseOver="this.style.cursor='hand'" value="www"></div>
</td>
</tr>
<tr style="display:none" class="www">
<td>element1</td>
</tr>
<tr style="display:none" class="www">
<td>element2</td>
</tr>
<tr style="display:none" class="www">
<td>element3</td>
</tr>
<tr bgcolor="ffffcc">
<td align="left" style="font-style:italic; font-weight: bold">
<div><input type="button" class="buttonSeq" onclick="ToggleTRbyClass('xxx'); return true;" onMouseOver="this.style.cursor='hand'" value="xxx"></div>
</td>
</tr>
<tr style="display:none" class="xxx">
<td>element4</td>
</tr>
<tr bgcolor="ffffcc">
<td align="left" style="font-style:italic; font-weight: bold">
<div><input type="button" class="buttonSeq" onclick="ToggleTRbyClass('zzz'); return true;" onMouseOver="this.style.cursor='hand'" value="zzz"></div>
</td>
</tr>
<tr style="display:none" class="zzz">
<td>element5</td>
</tr>
</tbody>
</table><br></body>
</html>

You need to specify a doctype as the first line in your markup. Without a doctype, IE will render in quirks mode, which is essentially the IE 5.5 rendering engine. Quirks mode greatly effects the box model and Javascript support, among other things.
Example:
<!doctype html>
Specifying the doctype will make your example work as it does in Firefox.
Edit:
The grey background comes from the following rule, which is technically wrong (you need to specify the # symbol when using hex colors:
input.buttonSeq {
color: blue;
background: ffffcc; /* change this to #ffffcc */
border: none;
margin-left:0pt;
margin-top: 0px;
margin-bottom: 0px;
font-size: 100%;
}

Rather than setting the display to "table-row", set it to "" so that the default behaviour comes back. Older versions of IE don't support table-row and need block instead.
If your CSS overrides the default (ie. if you used it to hide a class of rows from the start), try:
try {tr.style.display = "table-row";}
catch(e) {tr.style.display = "block";}
And add a DOCTYPE, like wsanville said.