Nom de la table CSS

Question

Y at-il un moyen de renommer ce code CSS pour affecter uniquement une certaine table au lieu de toutes les tables de mon site?

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

et le code 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

Pour cibler spécifiquement la table que vous montriez le code html pour, faites ceci:

#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; 
} 

Vous auriez pas besoin de la pleine table # matable.

Answer 2

Mettez table#mytable devant chaque sélecteur CSS.

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

Ou tout simplement #mytable.

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

Answer 3

Vous pouvez préfixer chaque règle avec votre identifiant de table (#mytable) de sorte que vous aurez quelque chose comme

#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

Vous pouvez modifier vos sélecteurs CSS pour correspondre uniquement un ID de table spécifique, donc par exemple ..

#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; 
}