Ich versuche, eine Spalte in einem <table/> mit einem <col/> Element zu formatieren. Ich kann background-color, width usw. einstellen, aber kann das font-weight nicht einstellen. Warum funktioniert es nicht?Tabellenspalte formatieren
<table>
<col style="font-weight:bold; background-color:#CCC;">
<col>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
Soweit ich weiß, können Sie nur die auf der Verwendung von CSS formatiert werden folgende <col> Element:
Diese page hat mehr Informationen.
Herb ist richtig - es ist besser, die <td> direkt zu stylen. Was ich mache ist folgendes:
<style type="text/css">
#mytable tr > td:first-child { color: red;} /* first column */
#mytable tr > td:first-child + td { color: green;} /* second column */
#mytable tr > td:first-child + td + td { color: blue;} /* third column */
</style>
</head>
<body>
<table id="mytable">
<tr>
<td>text 1</td>
<td>text 2</td>
<td>text 3</td>
</tr>
<tr>
<td>text 4</td>
<td>text 5</td>
<td>text 6</td>
</tr>
</table>
Dies wird jedoch nicht in IE funktionieren.
A col Tag innerhalb eines colgroup Tages sein muss, kann dies etwas sein, mit dem Problem zu tun.
Wie Andy sagte, aber möchte sicherstellen, dass es an das Original angehängt ist (und er kann noch nicht kommentieren). col muss nicht in colgroup sein. W3C Reference – Mikezx6r
Haben Sie versucht, den Stil über eine CSS-Klasse anzuwenden?
Die folgende scheint zu funktionieren:
<style type="text/css">
.xx {
background: yellow;
color: red;
font-weight: bold;
padding: 0 30px;
text-align: right;
}
<table border="1">
<col width="150" />
<col width="50" class="xx" />
<col width="80" />
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
Gleiches Ergebnis mit der Klasse. – Andy
Bitte beachten Sie, dass der IE (Quirks Mode) erlaubt Farbe zu arbeiten. Siehe http://www.quirksmode.org/css/columns.html. Aber das ist leider keine Lösung. –
Ihre beste Wette ist Ihr Styling direkt an die <td> Tags anzuwenden. Ich habe nie das <col>-Tag verwendet, aber die meisten Browser lassen Sie die Formatierung unter <table> und <td>/<th> Ebene, aber nicht auf einer mittleren Ebene. Wenn Sie zum Beispiel
<table>
<tr class="Highlight">
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
</table>
dann diese CSS wird nicht funktionieren
tr.Highlight { background:yellow }
aber das wird
tr.Highlight td { background:yellow }
Auch haben: Ich gehe davon aus Sie den Code oben nur zu Demonstrationszwecken ist und Sie werden Stile nicht wirklich inline anwenden.
Durchlesen, wie ich versuchte, eine Tabelle so zu stylen, dass die erste Spalte fett formatiert wäre und die anderen vier Spalten normaler Text wären. Die Verwendung von Col-Tag schien wie der Weg zu gehen, aber während ich die Breiten der Spalten mit der Breite Attribut festlegen konnte die Schrift-Gewicht: Fett würde nicht funktionieren Vielen Dank für mich in Richtung der Lösung. Durch all td-Elemente Styling td {font-weight: bold;} und dann ein benachbartes Geschwister-Selektor Spalten auszuwählen 2-5 und stylen sie wieder normal td + td {font-weight: normal;} Voila, all gut :)
Sie könnten nur diese benötigt haben:
tr td:first-child label {
font-weight: bold;
}
Das sieht für mich so aus, als würden Sie das Problem ein wenig übersteuern. Warum nicht eine "rote", "grüne" und "blaue" Klasse erstellen? Das würde überall funktionieren und viel intuitiver als erweiterte CSS-Selektoren. –
Jawohl, die CSS-Selektoren sind hässlich :) Aber ich persönlich würde hässliche CSS-Selektoren bevorzugen, als ein Klassenattribut zu jeder Tabellenzelle hinzufügen zu müssen, besonders wenn Sie eine statische Tabelle (dh keine serverseitige Generierung) haben von Zellen. – Bill
Leider wird dies für Colspans semantisch brechen. Das ist der springende Punkt der 'col' und' colgroup' Elemente, warum zum Teufel können Sie nicht die Farbe mit ihnen einstellen ?! –