Tabelle Spaltenformatierung

StackOverflow https://stackoverflow.com/questions/157770

  •  03-07-2019
  •  | 
  •  

Frage

Ich versuche, eine Spalte in einer <table/> zu formatieren ein <col/> Element verwendet. Ich kann so eingestellt background-color, width, etc., aber den font-weight nicht einstellen. Warum funktioniert es nicht? 

<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>
War es hilfreich?

Lösung

Soweit ich weiß, können Sie nur das Format folgendes CSS auf dem <col> Elemente mit:

  • background-color
  • Grenze
  • Breite
  • Sichtbarkeit

Diese hat weitere Informationen.

Herb ist richtig - es ist besser, die <td> die direkt stylen. Was ich tue, ist die folgende: 

<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 im IE funktionieren.

Andere Tipps

Ihre beste Wette ist Ihr Styling direkt an die <td> Tags anzuwenden. Ich habe nie den <col> Tag, aber die meisten Browser können Sie Formatierung anwenden am <table> und <td> / <th> Ebene, aber nicht auf einem mittleren Niveau. Zum Beispiel, wenn Sie 

<table>
    <tr class="Highlight">
        <td>One</td>
        <td>Two</td>
    </tr>
    <tr>
        <td>A</td>
        <td>B</td>
    </tr>
</table>

dann wird diese CSS nicht funktionieren 

tr.Highlight { background:yellow }

aber dieser Wille 

tr.Highlight td { background:yellow }

Also: Ich gehe davon aus Sie den Code oben nur zu Demonstrationszwecken ist und du nicht wirklich Stile inline gehen anwenden

.

Sie können nur diese benötigt haben: 

tr td:first-child label {
    font-weight: bold;
}

durch das Lesen, wie ich einen Tisch so zu gestalten, wurde versucht, dass die erste Spalte fett gedruckten Text und die die anderen vier Spalten normalen Text wäre wäre. Mit col Tag schien wie der Weg zu gehen, aber während ich die Breite der Spalten mit der Breite einstellen könnte die font-weight-Attribut: bold würde nicht funktionieren Vielen Dank für mich in Richtung der Lösung zeigt. Durch Styling all td Elemente 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:)

Haben Sie versucht, den Stil durch eine CSS-Klasse anwenden?

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>

Referenz für das col Element

Ein col Tag innerhalb eines colgroup Tages sein muss, kann dies etwas mit dem Problem zu tun.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top