Html 针对单个表的自定义表CSS

我想知道是否有一种方法可以在不影响页面或站点上所有其他表的情况下使用单个表。我发现这个CSS我很喜欢，但它调用了table标签和其他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>

---

谢谢，

在HTML中为表指定一个id

<table id="mytablename">
    <!--table stuff here-->
</table>

您在css中定义的规则将只应用于该id。您不必担心它会应用于任何其他表，因为id不能像类那样被多次使用

（上面的答案与设置类非常相似，语法略有不同）

---

有关更多信息，我建议阅读

，您完全可以设置一个类以该表为目标。只需确保更改所有css以查找您的类而不是所有表：

table { 

变成

.myTableClass {

.myTableClass th {

然后在新类中为其他选择器排序：

th {

变成

.myTableClass {

.myTableClass th {

---

等等。

如果你想为网站上的所有人建立一个基础，你可以在css中声明如下内容：

.table {
  // CSS code
}
.table[class-ext="foo"] {
   // more CSS rules
}

然后添加表元素类ext='foo'。然后，您的表将如下所示：

<table class="table" class-ext="foo">
   ...
</table>

...

是的，给它一个类，然后改变css，目标是

。在每个选择器上的ThisTableDesign

或者你不能给表一个类或ID并在此基础上使用css规则吗？虽然这是一个非常简单的问题，我想感谢您遵循如何操作的指导原则：）有没有一个广泛的方法来称呼它的意思，例如，如果我只想在特殊的表上使用它，我不能以某种方式将它包装为ex:.Mytabledesign{上面的所有表css}然后在表标记ex:@FrankG中调用它。这就是CSS选择器的工作原理。检查下面的答案，并阅读提供的链接。同时添加信息以使用子代选择器来定位th、td规则等。现在就开始尝试！！会让你知道我是怎么做的谢谢！就这样谢谢你！！我之所以这样认为，是因为我将.MyTableClass放在每个css标记的前面，然后使它将所有代码连接到.MyTableClass。太棒了，非常感谢！！！在th、tr等之前添加.myTableClass时，您告诉浏览器，它只应将关联样式应用于类为.myTableClass的元素内部的元素，并且这些元素本身也是类型为th、tr的元素，CSS中这种增加的特殊性允许您针对HTML的特定部分，而无需为每个包含的元素分配新类。更干净：）