Formattazione delle colonne della tabella

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

  •  03-07-2019
  •  | 
  •  

Domanda

Sto cercando di formattare una colonna in un <table/> usando un elemento <col/>. Posso impostare background-color, width, ecc., Ma non posso impostare font-weight. Perché non funziona? 

<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>
È stato utile?

Soluzione

Per quanto ne so, puoi solo formattare quanto segue usando CSS sull'elemento <col>:

  • background-color
  • confine
  • Larghezza
  • visibilità

Questa pagina contiene ulteriori informazioni.

Herb ha ragione: è meglio dare uno stile ai <td> direttamente. Quello che faccio è il seguente: 

<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>

Tuttavia, in IE non funzionerà.

Altri suggerimenti

La soluzione migliore è applicare lo styling direttamente ai tag <td>. Non ho mai usato il tag <col>, ma la maggior parte dei browser ti consente di applicare la formattazione a livello <table> e <th> / <=>, ma non a livello intermedio. Ad esempio se hai 

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

allora questo CSS non funzionerà 

tr.Highlight { background:yellow }

ma questo 

tr.Highlight td { background:yellow }

Inoltre: presumo che il codice sopra riportato sia solo a scopo dimostrativo e in realtà non applicherai gli stili in linea.

Potresti aver bisogno di questo: 

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

Leggendo questo mentre stavo tentando di modellare una tabella in modo che la prima colonna fosse in grassetto e le altre quattro colonne fossero normali. L'uso del tag col sembrava la strada da percorrere, ma mentre potevo impostare le larghezze delle colonne con l'attributo width il font-weight: grassetto non funzionava Grazie per avermi indicato nella direzione della soluzione. Dando uno stile a tutti gli elementi td td {font-weight: bold;} e quindi usando un selettore fratello adiacente per selezionare le colonne 2-5 e riportarle alla normalità td + td {font-weight: normal;} Voilà, va tutto bene :)

Hai provato ad applicare lo stile attraverso una classe CSS?

Sembra funzionare quanto segue: 

<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>

Riferimento per l'elemento col

Un tag col deve trovarsi all'interno di un tag colgroup, potrebbe essere qualcosa a che fare con il problema.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top