CSS имя таблицы

Question

Можно ли как-нибудь переименовать этот код CSS, чтобы он влиял только на определенную таблицу вместо всех таблиц на моем сайте?

 th {
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
 }

 th.nobg {
border-top: 0;
border-left: 0;
background: #C1DAD7;
 }

 td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
padding: 6px 6px 6px 12px;
color: #4f6b72;
 }

 td.alt {
background: #F5FAFA;
color: #797268;
 }

 th.spec {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #fff;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
 }

 th.specalt {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #f5fafa;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #797268;
 }

и HTML-код:

 <table id="mytable" cellspacing="0"> 
   <tr> 
   <th width="202" class="nobg" scope="col">Configurations</th> 
   <th width="250"></th> 
 </tr> 
 <tr> 
   <th scope="row" class="spec">Model</th> 
   <td>M9454LL/A</td> 
 </tr> 
 <tr> 
   <th scope="row" class="specalt">G5 Processor</th> 
   <td class="alt">Dual 1.8GHz PowerPC G5</td> 
 </tr> 
 <tr> 
   <th scope="row" class="spec">Frontside bus</th> 
   <td>900MHz per processor</td> 
</tr> 
<tr> 
   <th scope="row" class="specalt">Level2 Cache</th> 
   <td class="alt">512K per processor</td> 
</tr> 
</table>

Answer 1

Вы можете изменить селекторы CSS, чтобы они соответствовали только определенному идентификатору таблицы, например ...

#mytable th {
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
 }

#mytable th.nobg {
border-top: 0;
border-left: 0;
background: #C1DAD7;
 }

#mytable td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
padding: 6px 6px 6px 12px;
color: #4f6b72;
 }

Answer 2

Чтобы конкретно нацелить таблицу, для которой вы указали HTML-код, сделайте следующее:

#mytable th {
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
 }

#mytable th.nobg {
border-top: 0;
border-left: 0;
background: #C1DAD7;
 }

#mytable  td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
padding: 6px 6px 6px 12px;
color: #4f6b72;
 }

#mytable  td.alt {
background: #F5FAFA;
color: #797268;
 }

#mytable  th.spec {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #fff;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
 }

#mytable th.specalt {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #f5fafa;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #797268;
 }

Вам не понадобится полная таблица # mytable.

Answer 3

Вы можете поставить перед каждым правилом префикс вашего идентификатора таблицы (#mytable), чтобы у вас было что-то вроде

#mytable th {
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
 }

 #mytable th.nobg {
border-top: 0;
border-left: 0;
background: #C1DAD7;
 }

 #mytable td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
padding: 6px 6px 6px 12px;
color: #4f6b72;
 }

 #mytable td.alt {
background: #F5FAFA;
color: #797268;
 }

 #mytable th.spec {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #fff;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
 }

 #mytable th.specalt {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #f5fafa;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #797268;
 }

Answer 4

Поставьте table#mytable перед каждым селектором CSS.

table#mytable th{
}
table#mytable th.nobg{
}
table#mytable td{
}
table#mytable td.alt{
}
table#mytable th.spec{
}
table#mytable th.specalt{
}

Или просто #mytable.

#mytable th{
}
#mytable th.nobg{
}
#mytable td{
}
#mytable td.alt{
}
#mytable th.spec{
}
#mytable th.specalt{
}