Css - Wie zum überschreiben der css-Code für eine Zelle in der Tabelle

css-newbie-Frage -

wir haben eine generalisierte css definiert für die Tabelle zusammen mit Tabelle-Zellen als:

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

In einem scenerio, möchte ich überschreiben td style so, dass ich zeigen kann, ein Symbol Bild vor Tabellenzelle text.
also, wenn die Tabellen-Zelle ist, definiert als - <td> Vehicle Name & Details </td>

Ich möchte Stil für diese Zelle in der Tabelle, so dass es auch zeigen, Symbol, Bild vor text - 'Lok-Namen & Details'.

Fügte ich diesen style in css - Datei -

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

Hinzugefügt und td als <td class="vehicle"> Vehicle Name & Details </td>
aber kein Symbol angezeigt wird. Parent-Tabelle von diesem td ist <table class="table">

Bin ich etwas fehlt?

Danke!

Dies könnte ein browser-Problem. Welchen browser Sie entwickeln, testen und targeting?

InformationsquelleAutor iniki | 2011-08-05

css

16

.vehicle (ein class-Selektor) ist weniger spezifische als .table td (ein class-Selektor + eine Typ-Selektor).

Benötigen Sie entweder:
- eine mehr spezifische - Selektor (z.B. .table td.vehicle)
- eine ebenso spezifische - Selektor (z.B. td.vehicle) in einem Regel-set, das erscheint später in der stylesheet
- Vielen Dank für Ihre Antwort...schöne Erklärung. Ein furher Abfrage - wie kann ich das Symbol vor dem text, jetzt wird überlappt mit dem text.
- Sie haben das hinzufügen einiger Polsterung an der .vehicle Klasse, oder fügen Sie das Symbol als img und schweben Sie Links auf den text.
InformationsquelleAutor Quentin
1

Ändern Sie Ihre Auswahl, um die td.vehicle auch stellen Sie sicher, es erscheint nach .table td Selektor in der css-Datei.

Können Sie auch die spezielle td style inline:
```
<td style="background:url(mainFolder/img/icons/vehicle.png) no-repeat left center;">...</td>
```
InformationsquelleAutor nobody
-1

Überprüfen, um sicherzustellen, dass Ihre URL korrekt ist. Ich würde zuerst in einen absoluten Pfad (http://site.com/mainFolder...), dann ändern Sie es zu einem relativen Pfad.

InformationsquelleAutor Hybride
-1

versuchen, anstelle der background-position zu
```
      background:url(mainFolder/img/icons/vehicle.png) no-repeat left top;
```
Können Sie auch ändern, das no-repeat auf repeat für debugging-Zwecke, um zu sehen, wenn das Bild geladen.

Auch ich Rat u installieren Sie firebug (bei firefox) so können Sie zu manipulieren html und css on the fly.

InformationsquelleAutor blejzz
-1

Sollte es funktionieren, stellen Sie sicher, dass die route zu dem Bild korrekt ist. Und beachten Sie auch, dass ein hintergrund Bild setzen, so dass, wenn Sie nicht möchten, dass das Bild hinter den text, den Sie verwenden müssen, Polsterung --> jsfiddle
- Konnte ich wissen, warum Sie nach der Bereitstellung eine funktionierende Antwort mit einem Beispiel arbeiten bekam ich einen down-vote?
- Das Beispiel funktioniert nur, da der HTML-Code wurde so modifiziert, dass die ursprünglichen Stile passen nicht zusammen. also nicht, weil du die URL zum Bild stimmt (was es schon gab), sondern weil Sie aufgehört haben, der ursprüngliche hintergrund gesetzt in den ersten Platz.
- Ah, das war meine Schuld, dann, obwohl downvoting ohne Kommentierung nicht helfen zu verstehen, Dinge wie diese. In diesem Fall wird eine alternative Antwort auf Quentin wäre, die Nutzung !wichtiges Attribut in der css-Stil, jsfiddle.net/jasalguero/aWAaD/2 obwohl seine ist besser
- !important ist eine hässliche, one-shot-hammer, der nur bewirkt, dass die Wartung Probleme die Straße hinunter.
- Ich bin damit einverstanden, dass ich sagte, deine Antwort war besser 😀
InformationsquelleAutor jasalguero

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.