Mon css est situé à http://sillybean.net/css/seaglass.css et je veux utiliser ce CSS pour un seul tableau html, Sur la même page j'ai plusieurs tables html donc je ne veux pas affecter d'autres tables html. Quel est le moyen le plus rapide de le faire avec moins de modifications sur http://sillybean.net/css/seaglass.css?le moyen le plus rapide d'utiliser css pour la table HTML sans affecter une autre table HTML
Pouvez-vous simplement appliquer une classe à la table que vous voulez affecter, puis utiliser cette classe dans votre CSS?
Dans votre code HTML, vous pouvez mettre:
<table class="mytable">
... CONTENT OF THE TABLE, AS NORMAL ...
</table>
Et puis, ajoutez le sélecteur de classe à votre CSS:
table.mytable { border-collapse: collapse; border: 1px solid #839E99;
background: #f1f8ee; font: .9em/1.2em Georgia, "Times New Roman", Times, serif; color: #033; }
.mytable caption { font-size: 1.3em; font-weight: bold; text-align: left; padding: 1em 4px; }
.mytable td,
.mytable th { padding: 3px 3px .75em 3px; line-height: 1.3em; }
.mytable th { background: #839E99; color: #fff; font-weight: bold; text-align: left; padding-right: .5em; vertical-align: top; }
.mytable thead th { background: #2C5755; text-align: center; }
.mytable .odd td { background: #DBE6DD; }
.mytable .odd th { background: #6E8D88; }
.mytable td a,
.mytable td a:link { color: #325C91; }
.mytable td a:visited { color: #466C8E; }
.mytable td a:hover,
.mytable td a:focus { color: #1E4C94; }
.mytable th a,
.mytable td a:active { color: #fff; }
.mytable tfoot th,
.mytable tfoot td { background: #2C5755; color: #fff; }
.mytable th + td { padding-left: .5em; }
Appliquer le nom de classe à la table sur laquelle vous souhaitez appliquer css reste est bien ...
C'est exactement ce que les attributs id et class sont pour. Si vous ne pouvez pas modifier le balisage (comme le style myspace), vous devez utiliser des sélecteurs pour cibler la table plus précisément. Le choix des sélecteurs est quelque chose dont vous aurez besoin pour décider vous-même.
Définissez un ID ou une CLASSE dans votre CSS qui affectera la table en question.
Ensuite, dans votre code HTML, dites
<table id="theid"... />
ou
<table class="theclass" ... />
L'ID CSS ressemble
#theid
{
//attributes
}
classes ressemblent:
.theclass
{
//attributes
}
Je recommanderais 'table # theid' car les identifiants sont à usage unique, ce qui, selon moi, répond le mieux à la question. –
Voici les sélecteurs de classe et le balisage qui le style de la première table mais pas la seconde:
<style>
table.special { border: 1px solid #839E99; ... }
table.special caption { font-size: 1.3em; ... }
...
</style>
<table class="special">...</table>
<table>...</table>
Ou vous pouvez utiliser un sélecteur d'identité de façon similaire:
<style>
#my-special-table { border: 1px solid #839E99; ... }
#my-special-table caption { font-size: 1.3em; ... }
...
</style>
<table id="my-special-table">...</table>
<table>...</table>
Parfois, un religieux la guerre éclate sur laquelle de ces deux approches à utiliser. L'un ou l'autre est bon pour vos besoins. Selon la spécification, vous ne pouvez mettre qu'un ID donné sur au plus un élément de votre HTML (mais la plupart des navigateurs vous permettent de casser cette règle).
Bien que vous deviez ajouter une classe à la table que vous voulez affecter, supposons que vous ne pouvez modifier que le CSS. Dans ce cas, vous pouvez obtenir assez fantaisie avec selectors. Mais pas tous les browsers support eux. Vous pouvez voir que les CSS 2 selectors ne prennent pas en charge le concept n-ème enfant. Dans le cas contraire, si vous aviez html comme:
<html><head></head><body>
<table><tr><td>First</td></tr></table>
<table><tr><td>Second</td></tr></table>
<table><tr><td>Third</td></tr></table>
</body></html>
Vous pouvez cibler le premier avec sélecteurs CSS2, mais les deuxième et troisième ne peuvent être ciblés avec les CSS3.
table:first-child td {background-color:red;} /* CSS2, pretty wide support */
table:nth-child(2) td {background-color:red;} /* CSS3, limited support */
pour plusieurs table et classes
HTML Tableau
<table id="tableId1">
--Table Content--
</table>
<table id="tableId2">
--Table Content--
</table>
<table class="tableClass1">
--Table Content--
</table>
<table class="tableClass2">
--Table Content--
</table>
CSS Script
#tableId1, #tableId2
{
//attributes
}
.tableClass1, .tableClass2
{
//attributes
}
Table Sélection par classe pour le style d'une table désirée par exemple, si vous avoir Tableau:
<table class="tableOne"></table>
<table class="tableTwo"></table>
Puis, en CSS, vous utiliserez quelque chose comme ceci:
.classOne {
/* do your stuff here*/
}
.classTwo {
/* do your stuff here*/
}
En effet, ce qui est presque comme "l'espace de nommage" vos feuilles de style CSS. –
Je ne suis de loin pas un expert CSS - mais d'après mes tests il y a au moins une erreur dans le CSS ci-dessus: '.mytable td, th {/ * ... * /}' affecte seulement 'td' (cellules) qui ont la classe 'mytable' (à cause de la classe table) - ** mais ** cela affecte ** tous les en-têtes de table **' th'. à mon sens la syntaxe correcte doit être: '.mytable td, .mytable th {/ * ... * /}'. (testé dans les versions actuelles de chrome, firefox et IE) –