CSS - globale Einstellung punktuell aussetzen

cumulonimbus8 · 19. März 2021

Moin!

Ich habe per globaler CSS meine Tabellen auf 100% gesetzt.

CSS:

table{
width:100%;
}

So weit so schön.

Wie kann ich diese Einstellung für einzelne Tabellen aussetzen, also sie nicht mit einem anderen Wert überschreiben? (Beide Codes sind unabhängig, zu Demo)

HTML:

<style>
table{
  width:100%;
}
#ohne{
  width:50%;
}
</style>
<table id="ohne">
<tr halign="left" valign="center">
  <td>Dies ist etwas Text neben einem Bild, horizontal auf Mitte &nbsp;</td>
  <td><img src="./images/CN8.gif"></td>
</tr>
</table>
<table>
<tr halign="left" valign="center">
  <td>Dies ist etwas Text neben einem Bild, horizontla auf Mitte &nbsp;</td>
  <td><img src="./images/CN8.gif"></td>
</tr>
</table>

#ohne hat hier eine festen Wert, ich würde aber gerne die 100% aus dem CSS für diese Tabelle ausschalten damit sie so reagiert wie es käme gäbe es dieses CSS nicht.

CN8

Bemerkung: tr kann antürlich auch per CSS angefasst werden, aber bei meiner Frickelei bin ich noch nicht so weit.

tollertyp · 19. März 2021

Evtl die width mit "auto !important" überschreiben.
Und sich die Frage stellen, warum man für table globale Styles definiert.

Sykehouse · 19. März 2021

Ich weiss, es beantwortet deine Frage nicht, aber du solltest solche Dinge nicht mit Tabellen darstellen. Nimm div Container dafür und ordne sie per CSS wie gewünscht an.

tollertyp · 19. März 2021

@Sykehouse: Sofern es Tabellen sind, die nur dem Layout dienen und keine echte Tabelle repräsentieren, absolut richtig.

Sykehouse · 19. März 2021

Scheint ja hier nur dem Layout zu dienen. Das war auch mit "solche Dinge" gemeint.

cumulonimbus8 · 19. März 2021

Tja, warum Tabellen? Ich baue einen uralten Kram um, Schritt für Schritt…

…und die globale Definition mag ein falscher Schritt gewesen sein (aber ich wollte das ewige width="100%" loswerden).

@Sykehouse
Wie mag der DIV-Container denn für dich aussehen - erfülle bitte das valign. In der Tat würde eine einfach Zeile hier reichen.
(Sollte CSS nicht gerade eben dem layout auf die Füße helfen..?)

CN8

kim88 · 19. März 2021

Im Grunde sehr einfach. Tippe gerade auf dem Handy darum halte ich mich kurz.

CSS

CSS:

table:not('.no_width') {
    width: 100%;
}

HTML Tabelle mit width 100%

HTML:

<table>
    ...
</table>

HTML Tabelle ohne width Attribute

HTML:

<table class="no_width">
    ...
</table>

Klasse kannst du natürlich benennen wie du willst.

einziger Hinweis zu der Lösung CSS :not Selektor hat soweit ich es im Kopf habe keinen Internet Explorer Support.

cumulonimbus8 · 19. März 2021

@ kim88
Das scheint nicht recht klappen zu wollen.

OK, ich habe verschweigen, dass ich (so weit) 2 CSS feils je HTM-Datei lade - eine globale (die mit den 100%) und eine für die Seite die Angaben ergänzt oder aber überschreibt.

Zum Test habe ich im ersten Block, den ich in die 2. CSS eintrug, mal auf 50% gesetzt, aber das ficht die Darstellung nicht an, und die mit Class definierte Tabelle reagiert auch nicht.

→ CSS bkleibt mir ein Rätsel weil es für mich unheimlich viele Syntaxmöglichkeiten kennt für die ich noch kein systematisches Tutorial fand wie da global gesetzt wird, zusammengefasst, Children…

Wenn die Wünsche vom Chef erfüllt sind werde ich an dieser rein privaten Sache mal weiterknuspern; ah, das Makro ist durch…

CN8

kim88 · 19. März 2021

cumulonimbus8 schrieb:
Das scheint nicht recht klappen zu wollen.

Ausser im Internet Explorer funktioniert das definitiv.

Ein häufiges Problem/Fehler bei CSS und JS Entwicklung ist der Browsercache.

Wenn du einfach die CSS Datei bearbeitest auf deinen Websever stellst und die Seite aktualisierst siehst du oft keine Änderung, da der Browser die CSS Datei bereits im Cache gespeichert hat und sie von dort lädt.

Direkt umgehen kann man das wenn du die Seite mit "Strg+Shift+R" neulädst. Besser ist es die CSS Datei zu versionieren.

Irgendwo im <head> Bereich bindest du deine CSS ein. Dort kannst du einfach eine Version anhängen, wenn du die Datei bearbeitest kannst du einfach die Version erhöhen, dann lädt sie der Browser neu.

HTML:

<link rel="stylesheet" type="text/css" href="style.css?v=1" />

cumulonimbus8 · 19. März 2021

Was diese Zicklichkeiten angeht bin ich durchaus informiert.
Alles lokal, und Chrome hat [unmittelbarer Aufruf aus dem Editor] hier noch nie Ärger gemacht. Nur zu oft waren die Ursache krumme Finger.
Die Syntax jedenfalls tut nicht, das not nottet not, wenn ich so sagen darf. Und Cheffe schickt das nächste Häuflein Arbeit ins Home-Office… Ich werde das hier etwas schleifen lassen müssen. Dringend ist es eh nicht (gottseidank).
CN8

netzgestaltung · 19. März 2021

vor einiger Zeit hat mich ein alternativer CSS reset fasziniert. Mitgenommen habe ich unter anderem folgende möglichkeit:

CSS:

table:not([class]):not([id]){
  width:100%;
}

das bedeutet, dass alle tabellen angesprochen werden solange sie keine class oder id attribute haben.
ich würde das nur für class empfehlen, beides gemeinsam hab ich nur als beispiel hinzugefügt.
Referenz: https://piccalil.li/blog/a-modern-css-reset (da stand mal früher ul[class] statt ul[role='list'])

cumulonimbus8 · 19. März 2021

Irgendwie komme ich der Sache näher.
Die Syntax von netzgestaltung wirkt als Aus-Schalter. Allerdings - wird das ggf. vererbt an alle Tags innerhalb des Table-Tags?
Die Schrift in einem TD ist auf Standard und nicht der der Globlavorgabe…
…oder aber ich habe da komplett noch ganz was anderes verpfuscht. Jetzt geht das Suchen los da ich sehe, dass Schriftgrößen nicht das tun was sie sollen, ist mir bisher nicht aufgefallen.

CN8

kim88 · 19. März 2021

Ja klar alles was in diesem CSS Tag wird ist dann in der Tabelle die mit :not ausgeklammert wird nicht vorhanden.

lösen kannst du das so:

CSS:

table:not([class]):not([id]){
  width:100%;
}

table {
   //Deine sonstigen einstellungen
}

so ist nur das width davon betroffen. Lustig das es jetzt geht weil der Ansatz von @netzgestaltung und mir ist absolut identisch 🤷‍♂️

cumulonimbus8 · 19. März 2021

Dein Ansatz sehr wohl - ohe Frage -, aber nicht die aus dem Gedächtnis getippte Syntax.

Und das Problem existiert sehr wohl. Eine Tabelle mit einer Class beeinflusst meinen Augen nach auch die Klartexte in deren TDs - indem eine globale td{…} die die Schriftgröße beeinflusst nicht mehr erkannt wird.

Das führt den Plan effektiv ad absurdum - CSS nenne ich eine Horror mit System…

Zudem habe ich das Problem anders gelöst (auch wenn ich nicht wirklich überzeugt bin, dass das der richtige Weg war) Statt einer Tabelle ein einfaches DIV das mit display:flex; bewehrt ist. (Aber ich traue dem Braten nicht wirklich.)

CN8

netzgestaltung · 19. März 2021

<- da hab ich einen doppelpost gemacht

tollertyp · 19. März 2021

Wenn man Width auf dem allgemeinen table-Tag definiert anstatt entsprechen Style-Klassen zu nehmen, dann verstehe ich durchaus, dass man mit CSS auf dem Kriegsfuß steht. Der Horror ist meist nur eine Folge schlechter Entscheidungen beim Entwurf/bei der Umsetzung.

netzgestaltung · 19. März 2021

CSS nenne ich eine Horror mit System

Ich finde es die beste Möglichkeit Regelsets zu definieren ;-)

Ich glaube es wäre besser wenn du etwas mehr davon erzählst was du eigentlich machen willst als an spezifischen regeln für ein unbekanntes Problem zu basteln.

Beziehungsweise: was ist der Grund für

Wie kann ich diese Einstellung für einzelne Tabellen aussetzen, also sie nicht mit einem anderen Wert überschreiben?

Weil es gibt ca 25 mir bekannte Möglichkeiten das zu erreichen aber ich kann nicht wählen weil Kontext fehlt.

Das beispiel mit den Listen kam ca so das listen ja normal einen Punkt haben und die Idee war, das Listen mit einer Klasse vermutlich den nicht benötigen weil die irgendein Layout erhalten.

Bei der Liste wird die allgemeine definition nur nicht hingeschrieben, weil der Browser dafür eh schon was vorsieht.

Zum Beispiel willst du alle Tabellen-Zeilen mit einem Rahmen, aber tabellen die mit class="zebra" (oder weiteren) versehen sind sollen die erst gar nicht bekommen weil die werden verschiedene Hintergrundfarben haben.

Beispiel:

CSS:

/* alle tabellen */
table tr{
  border-bottom:1px solid #CCCCCC;
}

/* ausser sie haben ein "class" attribut */
table[class] tr{
  border:none;
}

folgende schreibweise macht genau das gleiche, ist aber später möglicherweise schwieriger zu überhöhen (siehe Kaskade):

CSS:

/* alle tabellen ausser sie haben ein "class" attribut */
table:not([class]) tr{
  border-bottom:1px solid #CCCCCC;
}

Eine spätere Erweiterung kann so aussehen:

CSS:

/* alle tabellen */
table tr{
  border-bottom:1px solid #CCCCCC;
}
/* ausser sie haben ein "class" attribut */
table[class] tr{
  border:none;
}
/* zebra tabelle */
table.zebra tr:nth-child(even){
  background:#CCCCCC;
  border-bottom:1px solid #F0F0F0;
}

Hier kommen der border:none; und der mit #F0F0F0 miteinander in konflikt und es zählt, welcher der beiden regeln nach der kaskade stärker ist.

Darauf kommt es immer an und du möchtest immer möglichst allgemeine Regeln und möglichst wenige spezifische.

vergleich mit der anderen Lösung:

CSS:

/* alle tabellen ausser sie haben ein "class" attribut */
table:not([class]) tr{
  border-bottom:1px solid #CCCCCC;
}
/* zebra tabelle */
table.zebra tr:nth-child(even){
  background:#CCCCCC;
  border-bottom:1px solid #F0F0F0;
}
/* tabelle mit erster spalte blau (könnte auch eine definition list sein?) */
table.with-labels td:first-child{
  background:#123456;
  color:#FFFFFF;
}

Aber es kann auch den Gegenteiligen Effekt haben, wenn der Rahmen gar nicht weg sein soll.

ger.ruler · 19. März 2021

tollertyp schrieb:
Wenn man Width auf dem allgemeinen table-Tag definiert anstatt entsprechen Style-Klassen zu nehmen, dann verstehe ich durchaus, dass man mit CSS auf dem Kriegsfuß steht. Der Horror ist meist nur eine Folge schlechter Entscheidungen beim Entwurf/bei der Umsetzung.

made my day

aus reiner neugierde: gibt es eigentlich ein inline unset ?

Suche

CSS - globale Einstellung punktuell aussetzen

cumulonimbus8

Fleet Admiral

tollertyp

Fleet Admiral

Sykehouse

Commander

tollertyp

Fleet Admiral

Sykehouse

Commander

cumulonimbus8

Fleet Admiral

kim88

Lt. Commander

cumulonimbus8

Fleet Admiral

kim88

Lt. Commander

cumulonimbus8

Fleet Admiral

netzgestaltung

Captain

cumulonimbus8

Fleet Admiral

kim88

Lt. Commander

cumulonimbus8

Fleet Admiral

netzgestaltung

Captain

tollertyp

Fleet Admiral

netzgestaltung

Captain

ger.ruler

Ensign

Ähnliche Themen