Reputation: 1579
Customized Table CSS for a Single Table
I wanted to know if there a way to customer a single table without effecting all other tables on the page or site. I found this CSS which I like a lot but its calling the table tag along with other table elements and it effects all my tables on my site. I just want to be able to effect one table only. Here is the css:
table {
background: #f5f5f5;
border-collapse: separate;
box-shadow: inset 0 1px 0 #fff;
font-size: 12px;
line-height: 24px;
margin: 30px auto;
text-align: left;
width: 800px;
}
th {
background: url(http://jackrugile.com/images/misc/noise-diagonal.png), linear-gradient(#777, #444);
border-left: 1px solid #555;
border-right: 1px solid #777;
border-top: 1px solid #555;
border-bottom: 1px solid #333;
box-shadow: inset 0 1px 0 #999;
color: #fff;
font-weight: bold;
padding: 10px 15px;
position: relative;
text-shadow: 0 1px 0 #000;
}
th:after {
background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.08));
content: '';
display: block;
height: 25%;
left: 0;
margin: 1px 0 0 0;
position: absolute;
top: 25%;
width: 100%;
}
th:first-child {
border-left: 1px solid #777;
box-shadow: inset 1px 1px 0 #999;
}
th:last-child {
box-shadow: inset -1px 1px 0 #999;
}
td {
border-right: 1px solid #fff;
border-left: 1px solid #e8e8e8;
border-top: 1px solid #fff;
border-bottom: 1px solid #e8e8e8;
padding: 10px 15px;
position: relative;
transition: all 300ms;
}
td:first-child {
box-shadow: inset 1px 0 0 #fff;
}
td:last-child {
border-right: 1px solid #e8e8e8;
box-shadow: inset -1px 0 0 #fff;
}
tr {
background: url(http://jackrugile.com/images/misc/noise-diagonal.png);
}
tr:nth-child(odd) td {
background: #f1f1f1 url(http://jackrugile.com/images/misc/noise-diagonal.png);
}
tr:last-of-type td {
box-shadow: inset 0 -1px 0 #fff;
}
tr:last-of-type td:first-child {
box-shadow: inset 1px -1px 0 #fff;
}
tr:last-of-type td:last-child {
box-shadow: inset -1px -1px 0 #fff;
}
tbody:hover td {
color: transparent;
text-shadow: 0 0 3px #aaa;
}
tbody:hover tr:hover td {
color: #444;
text-shadow: 0 1px 0 #fff;
}
Here is my html table:
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="48%" height="22" valign="middle">Course Description / Registration</td>
<td width="12%" height="22" valign="middle">Start Date</td>
<td width="7%" height="22" valign="middle"> Days</td>
<td width="20%" height="22" valign="middle">Location</td>
<td width="13%" height="22" valign="middle">Tuition</td>
</tr>
<tr>
<td height="30" valign="middle"><a href="20150729GNJ.asp">21st Century Policing: Proactive Solutions</a></td>
<td height="30" valign="middle">07/29/15</td>
<td height="30" valign="middle">01</td>
<td height="30" valign="middle">Glassboro, NJ</td>
<td height="30" valign="middle">No Cost</td>
</tr>
<tr>
<td height="30" valign="middle">21st Century Policing: Proactive Solutions</td>
<td height="30" valign="middle">07/30/15</td>
<td height="30" valign="middle">01</td>
<td height="30" valign="middle">Camden, NJ</td>
<td height="30" valign="middle">No Cost</td>
</tr>
<tr>
<td height="30" valign="middle">21st Century Policing: Proactive Solutions</td>
<td height="30" valign="middle">08/20/15</td>
<td height="30" valign="middle">01</td>
<td height="30" valign="middle">Newark, DE</td>
<td height="30" valign="middle">No Cost</td>
</tr>
<tr>
<td height="30" valign="middle">Blue Courage: The Heart & Mind of the Guardian</td>
<td height="30" valign="middle">08/24/15</td>
<td height="30" valign="middle">02</td>
<td height="30" valign="middle">New Brunswick, NJ</td>
<td height="30" valign="middle">$129 / $159</td>
</tr>
<tr>
<td height="30" valign="middle"> </td>
<td height="30" valign="middle"> </td>
<td height="30" valign="middle"> </td>
<td height="30" valign="middle"> </td>
<td height="30" valign="middle"> </td>
</tr>
<tr>
<td height="30" valign="middle"> </td>
<td height="30" valign="middle"> </td>
<td height="30" valign="middle"> </td>
<td height="30" valign="middle"> </td>
<td height="30" valign="middle"> </td>
</tr>
</table>
Is there a way to convert this to some kind of custom class like class="ThisTableDesign". If that's not possible I was thinking my next step would be to change things from table in ss to something for example:
/* This was called Table now I changed it to ThisTableDesign
ThisTableDesign{
background: #f5f5f5;
border-collapse: separate;
box-shadow: inset 0 1px 0 #fff;
font-size: 12px;
line-height: 24px;
margin: 30px auto;
text-align: left;
width: 800px;
}
Thanks,
Upvotes: 2
Views: 611
Answers (3)
Reputation: 1783
If you want a base for all on the site, you can declare in your css something like this :
.table {
// CSS code
}
.table[class-ext="foo"] {
// more CSS rules
}
and then add in your table element class-ext='foo'. Then, your table will be like :
<table class="table" class-ext="foo">
...
</table>
Upvotes: 0
Reputation: 849
YOu can definitely set up a class to target that table. Just make sure to change ALL the css to look for your class instead of all tables:
table {
becomes
.myTableClass {
Then preface the other selectors with your new class:
th {
becomes
.myTableClass th {
etc.
Upvotes: 4
Reputation: 572
Give the table an id in the HTML
<table id="mytablename">
<!--table stuff here-->
</table>
And then in your CSS, reference it by id
#mytablename {
/*lots of css rules*/
}
The rules you define in the css will ONLY apply to that one id. And you won't have to worry about it applying to any other table, as id's cannot be used multiple times like classes can.
(The answer above works very similar to setting a class, with slightly different syntax)
For more information, I would recommend reading this
Upvotes: 2