J'ai un table
dans un div
, avec les ID table1
et div1
.Définition de CSS pour les cellules d'un tableau
Je veux définir le CSS pour les cellules de la table.
À quoi ressemble le bloc CSS? Comme cela ?:
div1.table1{
}
J'ai un table
dans un div
, avec les ID table1
et div1
.Définition de CSS pour les cellules d'un tableau
Je veux définir le CSS pour les cellules de la table.
À quoi ressemble le bloc CSS? Comme cela ?:
div1.table1{
}
#table1 td {...}
La livre signifie que ce qui suit est un identifiant, dans votre cas table1. le td qui suit signifie que "tout td qui est un descendant de # table1". Here is a pretty good tutorial.
EDIT: pour le sélecteur plus efficace d'utiliser #table1 > tr > td {...}
Si vous essayez d'être aussi précis que possible:
#div1 #table1 tr td {
}
Sinon, vous pourriez sortir avec
#table1 tr td {
}
ou même
#table1 td {
}
Le plus tard deux sera le style de tout élément avec l'id « table1 » (pas seulement un élément avec l'id « table1 » à l'intérieur d'un élément avec l'id « div1 »
#div1 #table1 td
{
...
}
EDIT: Correction - Je lis trop vite - j'utilise habituellement la classe à la place de l'ID, donc j'ai utilisé. par habitude.
En supposant html:
<div id="div1">
<table id="table1">
...
</table>
</div>
Utilisez CSS:
#div1 #table1 td {
...
}
qui vous permettra de coiffer les cellules.
#div1 #table1 td{ }
parce
# = ID
. = class
nothing = tag
À mon avis une meilleure façon de le faire serait ...
#div1 table td{ }
<div id="div1"><table></table></div>
Vous avez vraiment pas besoin de créer un nouvel identifiant pour la table. Cela dépend si vous avez plus d'une table dans votre div et si les tables vont être différentes, mais à partir de votre question, je dirais que ce serait mieux.
Si les ID sont table1 et div1, vous utilisez le signe # pour indiquer qu'un "élément" est utilisé (# div1, # table1). Si vous les avez marqués comme classes, utilisez un point (.div1, .table1). Les identifiants doivent être utilisés une fois par page, les classes peuvent être réutilisées encore et encore. Dans ce cas, tout ce que vous pourriez avoir besoin est #table1 td { }
Tout ces éléments fonctionnera:
#table1 tr td{
}
#div1 #table1 tr td{
}
#table1 td{
}
#div1 tr td{
}
#div1 table td{
}
Vous utilisez des espaces pour séparer les tags.
ou bien, si votre table est générée par un script côté serveur, vous pouvez également ajouter des classes CSS explicitement aux lignes de la table comme
<table...>
<tbody>
<tr class="odd">
<td>..</td>
<td>..</td>
</tr>
<tr class="even">
<td>..</td>
<td>..</td>
</tr>
</tbody>
</table>
Cela dépend de la précision que vous voulez être. CSS signifie Cascading Style Sheets (Feuilles de style en cascade), donc les règles suivantes tomberont en cascade vers le plus spécifique de haut en bas:
/* all td in the page */
td { color: '#aaaaaa' }
/* all td in table with id table1 */
#table1 td { color: '#bbbbbb' }
/* all td in a div that contains this table with this id */
div #table1 td { color: '#cccccc' }
/* all td in this specific div that contains this specific table */
#div1 #table1 td { color: '#dddddd' }
Merci, George. Pour référence future, disons que je veux contrôler chaque td que j'ai dans un tableau. Est-ce que je donnerais un identifiant à chaque td? Si oui, à quoi ressemblerait le CSS? J'apprécie l'aide! – bmw0128
vous devriez donner à chaque TD un ID unique si vous voulez les styliser différemment, ou donner à chaque TD une classe si vous avez des groupes de TD qui auront le même style, mais différent des autres classes. – Jason