Colgroup-Element der HTML-Tabelle funktioniert nicht

Ich möchte unterschiedliche Stile für jede Spalte einer Tabelle. Ich habe gelesen, dass Sie das tun könnten, indem Sie verwenden <colgroup> oder <col>, aber ich hatte kein Glück. Ich habe ein Beispiel Hier, und nichts scheint sich zu ändern. Mache ich etwas falsch? Funktioniert das mit XHTML?

Ich weiß, dass ich jedem ein “Klassen”-Attribut hinzufügen könnte <td>aber das scheint schwach.

Das ist richtig. Während colgroup selbst wird von allen Browsern unterstützt, dies gilt nicht für die Eigenschaften des Inneren col Element. Nur von möglichen Attributen width wird von allen Browsern unterstützt. Aber im Gegensatz zu CSS, <col width=""> unterstützt nur Pixel- und Prozentbreiten.

Verwenden Sie es nicht. Erstellen Sie stattdessen CSS-Klassen und weisen Sie sie jeder zu td. Ja, es ist scheiße.

Setze deine table-layout auf auto statt fix…

table {table-layout: auto;}

Meine persönliche Website unterstützt mehrere Themen und ich sehe diese Art von Unterschieden ständig.

Hier ist ein Trick, den ich verwendet habe, der tatsächlich gut funktioniert hat. In einer generischen (seitenweiten) CSS-Datei habe ich Folgendes eingefügt:

.mytable td:nth-child(1) { width: var(--w1);}
.mytable td:nth-child(2) { width: var(--w2);}
.mytable td:nth-child(3) { width: var(--w3);}
.mytable td:nth-child(4) { width: var(--w4);}

und so weiter bis zu dem, was meiner Meinung nach die maximale Anzahl von Spalten in einer Tabelle war, die ich jemals auf meiner Website benötigen würde.

Dann könnte ich auf jeder Tabelle die Breite mit einem Stil wie dem folgenden definieren:

<table class="mytable" id="tbl1" style="--w1: 30px; --w2: 100px; --w3: 80px;">

Dies machte es einfach, die Spaltenbreiten festzulegen, und ich konnte Code hinzufügen, um die Größe der Spalten zu ändern, der einfach die Stileigenschaft in der Tabelle für die gewünschte Spalte ändern musste. Dadurch wurde vermieden, dass ich jedes Mal zahlreiche CCS-Einträge machen musste, wenn ich die Spaltenbreiten für eine Tabelle definieren wollte. Um eine Spaltenbreite zu ändern, könnten Sie so etwas verwenden:

document.getElementById("tbl1").style.setProperty("--w2", "123px");

Das Obige ändert einfach die Breite von Spalte 2, indem der Variablenwert –w2 geändert wird.

Sie könnten CSS-Selektoren verwenden, um ähnliche Ergebnisse zu erhalten, ohne zusätzliche Klassen hinzuzufügen.

Wenn Sie beispielsweise einer zweiten Spalte einen bestimmten Stil geben möchten, können Sie Folgendes verwenden:

table>tbody>td:nth-child(2){font-weight: bolder;}

Wenn Sie 2020 unterschiedliche Stile für Spalten wünschen, können Sie:
1. style/CSS

, aber nur für wenige Eigenschaften
2. Verwenden Sie th/td:nth-child(#number) in CSS (meine bevorzugte Lösung, keine Ahnung, was mit colspans passiert)
3. Fügen Sie den th/td-Elementen manuell eine Klasse hinzu

Verweise:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col
https://www.w3.org/TR/CSS22/tables.html#columns

Sie sollten nicht das HTML-Attribut “width” verwenden, sondern style/CSS. Im Stil/CSS für

sollen Sie nur “border”, “background”, “width” und “visibility” verwenden. Sie können ems verwenden, um Werte auszudrücken.

Ich bin verwirrt: w3 sagt: “Die Eigenschaft ‘Breite’ gibt die Mindestbreite für die Spalte an.” was mir angesichts der Existenz einer “min-width” -Eigenschaft widersprüchlich erscheint. Auf Firefox 72 (Ubuntu)

<col style="width: 13em">

setzt eine “feste” Breite (wie ich erwartet hatte). Wenn ich die Größe des Fensters verändere und es verenge, wird die Spalte in der Größe angepasst und der Inhalt in mehr Zeilen umbrochen.

Ich hatte also gerade das gleiche Problem … das eigentliche Problem ist, dass Sie, selbst wenn style/CSS für

(anstelle von HTML-Attributen) verwendet wird, immer noch nur die folgenden Dinge formatieren können:

• Breite
• Grenzen
• Hintergrundfarben
• Sichtweite

Quelle: https://www.w3.org/TR/CSS21/tables.html#columns

Wenn Sie wirklich cols-Tags ohne verwenden müssen Reagieren Einschränkung dann dangerouslySetInnerHTML wird helfen:

<colgroup dangerouslySetInnerHTML={{
  __html: `
    <col style="background: red;"/>
    <col style="width: 20px;"/>
  `
}}/>

Beachten Sie, dass dies zwar funktioniert, aber nicht die empfohlene Methode für die Arbeit mit React ist.