Tabela formatação da coluna

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

  •  03-07-2019
  •  | 
  •  

Pergunta

Eu estou tentando formatar uma coluna em uma <table/> usando um elemento <col/>. Eu posso definir background-color, width, etc., mas não pode definir o font-weight. Por que não funciona? 

<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>
Foi útil?

Solução

Tanto quanto eu sei, você só pode formatar o seguinte usando CSS no elemento <col>:

  • background-color
  • fronteira
  • largura
  • visibilidade

Este página tem mais informações.

Herb é certo - é melhor estilo do <td> é diretamente. O que eu faço é a seguinte: 

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

Este não irá funcionar no IE no entanto.

Outras dicas

Sua melhor aposta é para aplicar o seu estilo diretamente para as tags <td>. Eu nunca usei a tag <col>, mas a maioria dos navegadores permitem que você aplicar formatação ao nível <table> <td> e <th> /, mas não em um nível intermediário. Por exemplo, se você tiver 

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

então este CSS não vai funcionar 

tr.Highlight { background:yellow }

mas esta vontade 

tr.Highlight td { background:yellow }

Além disso: eu assumo o seu código acima é apenas para fins de demonstração e você não está realmente indo para aplicar estilos em linha

.

Você pode ter só precisava o seguinte: 

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

Leitura através deste como eu estava tentando estilo de uma mesa de modo que a primeira coluna seria o texto corajoso e os outros quatro colunas seria de texto normal. Usando tag col parecia ser o caminho a percorrer, mas enquanto eu poderia definir as larguras das colunas com o atributo width o font-weight: bold não iria funcionar Obrigado por me apontar na direção da solução. Ao denominar todos os elementos td td {font-weight: bold;} e em seguida, usando um seletor irmão adjacente ao selecionar colunas 2-5 e estilo-los de volta para td + td {font-weight: normal;} normais Voila, alls boa:)

Você tentou aplicar o estilo através de uma classe CSS?

Os seguintes parece funcionar: 

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

referência para o elemento col

A tag col deve estar dentro de uma tag colgroup, Isso pode ser algo a ver com o problema.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top