emeriks
Goto Top

Hilfe bei CSS

Hi,
vorne weg: Bin in HTML und CSS nicht so die Leuchte. Ich will bloß ein paar Reports erstellen lassen und diese etwas ansehnlich formatieren.
Habe getestet mit IE, Firefox und Chrome, sodass ich davon ausgehe, dass ich das grundsätzlich falsch mache.

Ich will also, dass alle Zellen aller Tabellen einer Seite den gleichen Stil haben. Habe dafür einen CSS-Style erstellt, welcher auch funktioniert.
<style>
....
td {
font-family: Tahoma;
font-size: 11px;
border-top: 1px solid #999999;
border-right: 1px solid #999999;
border-bottom: 1px solid #999999;
border-left: 1px solid #999999;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
....
</style>


Jetzt habe ich aber eine Tabelle auf dieser Seite, bei welcher keine Zellenränder angezeigt werden solle. Also dachte ich, erstelle ich einfach zusätzlich eine Klasse und gebe diese bei dieser Tabelle explizit an.
.td2 {
border-top: 0px;
border-right: 0px;
border-bottom: 0px;
border-left: 0px;
}

....
<table>
  <tr>
    <td class="td2">Bla bla bla</td>  
    <td class="td2">Bla bla bla</td>  
  </tr>
  <tr>
...
</table>

....

Macht er nicht. Auch die Zellen dieser Tabelle haben einen Rand.
Habe jetzt schon experimentiert. Wenn ich im ersten Style statt Standard "td" eine eigene Klasse festlege, z.B. "td1", dann kann ich in den Tabellen durch Angabe der Klasse "td1" oder "td2" steuern, wie die Zelle aussehen soll.

Wie muss ich es machen, wenn ich ein Standard-Format für alle TD festlegen und nur bei abweichenden Zellen explizit eine andere Klasse angeben will?

E.

Content-Key: 352685

Url: https://administrator.de/contentid/352685

Ausgedruckt am: 19.03.2024 um 11:03 Uhr

Mitglied: ashnod
ashnod 24.10.2017 um 11:00:58 Uhr
Goto Top
Moin ....

So auf nen schnellen Blick nimmt der die Formatierungen für td doch trotzdem mit und ändert nur die Eigenschaften die du in der klasse mitgibst.


Also dann in td nur grundsätzliches mitgeben und in den Klassen verändernde Details aufführen.

Sanfte Grüße
Mitglied: emeriks
emeriks 24.10.2017 um 11:08:25 Uhr
Goto Top
Also dann in td nur grundsätzliches mitgeben und in den Klassen verändernde Details aufführen.
Ja mache ich doch so. Einmal für "TD" allgemein und einmal für "td2". Aber er ignoriert die abweichenden Angaben für "td2".
Mitglied: ashnod
ashnod 24.10.2017 aktualisiert um 11:27:27 Uhr
Goto Top
Deshalb dachte ich eher daran den Rand in einer eigenen Klasse zu definieren nicht in der globalen <td>

und evtl. funktioniert:

border-right-style:none;
etc..

ansonsten sorry ... bin da auch schon eingestaubt face-wink


Edit: und latürnich .... schön auf die Reihenfolge achten face-wink
Mitglied: emeriks
emeriks 24.10.2017 um 11:29:22 Uhr
Goto Top
Deshalb dachte ich eher daran den Rand in einer eigenen Klasse zu definieren nicht in der globalen <td>
Habe ich bereits in meiner Frage so geschrieben. Das habe ich probiert, und das funktioniert auch. Aber das ist aufwendig, weil ich dann bei jeder Zelle die Klasse angeben muss. Aber genau das will ich ja vermeiden. Nur dort, wo es abweichend ist, will ich eine Klasse angeben müssen.
Mitglied: Yannosch
Yannosch 24.10.2017 um 11:38:14 Uhr
Goto Top
Zitat von @emeriks:

Hi,
vorne weg: Bin in HTML und CSS nicht so die Leuchte. Ich will bloß ein paar Reports erstellen lassen und diese etwas ansehnlich formatieren.
Habe getestet mit IE, Firefox und Chrome, sodass ich davon ausgehe, dass ich das grundsätzlich falsch mache.

Ich will also, dass alle Zellen aller Tabellen einer Seite den gleichen Stil haben. Habe dafür einen CSS-Style erstellt, welcher auch funktioniert.
> <style>
> ....
> td {
> font-family: Tahoma;
> font-size: 11px;
> border-top: 1px solid #999999;
> border-right: 1px solid #999999;
> border-bottom: 1px solid #999999;
> border-left: 1px solid #999999;
> padding-top: 0px;
> padding-right: 0px;
> padding-bottom: 0px;
> padding-left: 0px;
> }
> ....
> </style>
> 

da fehlt aber ein . vor der css Klasse oder irre ich mich?



Jetzt habe ich aber eine Tabelle auf dieser Seite, bei welcher keine Zellenränder angezeigt werden solle. Also dachte ich, erstelle ich einfach zusätzlich eine Klasse und gebe diese bei dieser Tabelle explizit an.

> .td2 {
> border-top: 0px;
> border-right: 0px;
> border-bottom: 0px;
> border-left: 0px;
> }
> 
> ....
> <table>
>   <tr>
>     <td class="td2">Bla bla bla</td>  
>     <td class="td2">Bla bla bla</td>  
>   </tr>
>   <tr>
> ...
> </table>
> 
> ....
> 

Macht er nicht. Auch die Zellen dieser Tabelle haben einen Rand.
Habe jetzt schon experimentiert. Wenn ich im ersten Style statt Standard "td" eine eigene Klasse festlege, z.B. "td1", dann kann ich in den Tabellen durch Angabe der Klasse "td1" oder "td2" steuern, wie die Zelle aussehen soll.

Wie muss ich es machen, wenn ich ein Standard-Format für alle TD festlegen und nur bei abweichenden Zellen explizit eine andere Klasse angeben will?

CSS:
.calendar-noBorder {
    border: none;
    background-color: red;
}

HTML:
table class="calendar-table">  
    <tr>
        <td class="calendar-noBorder">&nbsp;</td>  
        <td> 1 </td>
        <td> 2 </td>
        <td> 3 </td>


E.


Mitglied: 134464
Lösung 134464 24.10.2017 um 11:48:57 Uhr
Goto Top
Mitglied: emeriks
emeriks 24.10.2017 um 11:56:07 Uhr
Goto Top
Jepp.
Der Fehler: Statt "border: 0px" muss es "border:none" lauten.

Danke.
Mitglied: ashnod
ashnod 24.10.2017 um 12:00:04 Uhr
Goto Top
Oki ... lese nächstes mal genauer face-wink

ist dafür aber die zuverlässige Methode ...

wenn nicht setze das

border-top: 1px solid #999999; 

doch aber auch komplett zurück

border-top: 0px none #fff; (Farbe des Hintergrunds) 

maybe it helps ......