Tabela formatação da coluna
-
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>
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>
A tag col
deve estar dentro de uma tag colgroup
, Isso pode ser algo a ver com o problema.