Css - Comment remplacer le css pour une cellule de tableau

css débutant question -
nous avons généralisé css défini pour la Table avec ses Cellules d'un Tableau comme:

.table {
    width: 100%;
    margin: 1em 0 1em 0;
    border-top: 1px solid #A3C0E8;
    border-left: 1px solid #A3C0E8;    
}

.table td, .table th {
    padding: .6em;
    border-right: 1px solid #A3C0E8;
    border-bottom: 1px solid #A3C0E8;
    vertical-align: middle;
    background:#D7E8FF;
    color:#333;
}

Dans un scenerio, je veux remplacer td style, afin que je puisse montrer une image de l'icône en face du Tableau le texte de la Cellule.
donc, si la Cellule de la Table est définie comme - <td> Vehicle Name & Details </td>

Je veux appliquer le style de cette Cellule de Tableau afin qu'il soit également montrer l'image de l'icône en face du texte - "le Nom de Véhicule & Détails".

J'ai ajouté ce style dans le fichier css -

.vehicle { background:url(mainFolder/img/icons/vehicle.png) no-repeat left center; }

et ajouté à la td comme <td class="vehicle"> Vehicle Name & Details </td>
mais aucune icône n'est affichée. Table Parent de ce td est <table class="table">

Suis-je raté quelque chose?

Merci!

Cela pourrait être un problème de navigateur. Ce navigateur vous êtes en développement, de test et de ciblage?

OriginalL'auteur iniki | 2011-08-05

  1. 16

    .vehicle (un sélecteur de classe) est moins spécifique que .table td (un sélecteur de classe + un sélecteur de type).

    Vous avez besoin de:

    • un plus spécifique sélecteur (par exemple .table td.vehicle)
    • un également spécifique sélecteur (par exemple td.vehicle) dans un ensemble de règles qui apparaît plus tard dans la feuille de style
    Merci pour votre réponse...belle explication. Un führer requête - comment puis-je faire de l'icône à comparaître devant le texte, pour l'instant il est en cours de chevauchement avec le texte.
    vous devez ajouter un peu de rembourrage à l' .vehicle classe, ou d'ajouter l'icône en tant que img et flotter à gauche pour le texte.

    OriginalL'auteur Quentin

  2. 1

    Changer votre sélecteur à td.vehicle assurez-vous également qu'il apparaît après .table td sélecteur dans votre fichier css.

    Vous pouvez également rendre le spécial de la td style inline:

    <td style="background:url(mainFolder/img/icons/vehicle.png) no-repeat left center;">...</td>

    OriginalL'auteur nobody

  3. -1

    Double vérifier que votre adresse est correcte. Je voudrais d'abord mettre un chemin absolu (http://site.com/mainFolder...) d'abord, puis de le changer pour un chemin d'accès relatif.

    OriginalL'auteur Hybride

  4. -1

    essayez de remplacer le fond de la position de

          background:url(mainFolder/img/icons/vehicle.png) no-repeat left top;

    Vous pouvez également modifier la no-repeat pour répéter pour le débogage des fins de voir si l'image se charge.

    Aussi je le conseil u installer firebug (si vous utilisez firefox) afin de pouvoir manipuler le html et les css à la volée.

    OriginalL'auteur blejzz

  5. -1

    Il doit travailler, assurez-vous que le chemin de l'image est correcte. Et notez également que c'est une image d'arrière-plan en cours de réglage, donc si vous ne voulez pas l'image derrière le texte, vous devez utiliser un rembourrage --> jsfiddle

    Pourrais-je savoir pourquoi après avoir fourni un travail de réponse avec un exemple de travail j'ai eu une baisse de vote?
    L'exemple ne fonctionne que parce que le HTML a été modifié de façon originale les styles ne correspondent pas. c'est à dire pas parce que vous avez l'URL de l'image correcte (c'était déjà le cas), mais parce que vous avez arrêté de l'arrière-plan d'origine définies dans la première place.
    Ah, que c'était de ma faute alors, bien que downvoting sans commenter n'aide pas à comprendre ce genre de choses. Dans ce cas, une alternative la réponse à Quentin serait d'utiliser la !attribut important dans la feuille de style css jsfiddle.net/jasalguero/aWAaD/2 bien que le son est mieux
    !important est un vilain, un coup de marteau qui vient causes des problèmes de maintenance en bas de la route.
    Je suis d'accord, je l'ai dit, votre réponse était mieux 😀

    OriginalL'auteur jasalguero