html - 单个表格的自定义表格 CSS

Question

我想知道是否有一种方法可以在不影响页面或网站上的所有其他表格的情况下处理单个表格。我发现我非常喜欢这个 CSS，但它调用了表格标签以及其他表格元素，它影响了我网站上的所有表格。我只想能够影响一张 table 。这是 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;
}

这是我的 html 表格:

<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 &amp; 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">&nbsp;</td>
<td height="30" valign="middle">&nbsp;</td>
<td height="30" valign="middle">&nbsp;</td>
<td height="30" valign="middle">&nbsp;</td>
<td height="30" valign="middle">&nbsp;</td>
</tr>
<tr>
<td height="30" valign="middle">&nbsp;</td>
<td height="30" valign="middle">&nbsp;</td>
<td height="30" valign="middle">&nbsp;</td>
<td height="30" valign="middle">&nbsp;</td>
<td height="30" valign="middle">&nbsp;</td>
</tr>
</table>

有没有办法将其转换为某种自定义类，如 class="ThisTableDesign"。如果那不可能，我想我的下一步是将 ss 中的表更改为例如:

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

谢谢，

Answer 1

您绝对可以设置一个类来定位该表。只需确保更改所有 css 以查找您的类而不是所有表:

table { 

成为

.myTableClass {

然后在其他选择器前面加上你的新类:

th {

成为

.myTableClass th {

等等