Question

我想知道是否有办法在不影响页面或网站上的所有其他表格的情况下为客户提供单个表格。我发现这个CSS我很喜欢，但它调用表标签和其他表元素，它影响我网站上的所有表格。我只是希望能够只影响一个表。这是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 =＆＃34; ThisTableDesign＆＃34;。如果那是不可能的话，我认为我的下一步就是将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 {

等

Answer 2

在HTML

中为表格提供ID

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

然后在你的CSS中，通过id

引用它

#mytablename {
    /*lots of css rules*/
}

您在css中定义的规则仅适用于该ID。并且你不必担心它适用于任何其他表，因为id不能像类一样多次使用。

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

有关详情，建议您阅读this

Answer 3

如果你想在网站上为所有人提供基础，你可以在你的css中声明如下：

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

然后添加你的表元素class-ext ='foo'。然后，你的表将像：

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

单表的自定义表CSS

3 个答案: