css - sirve - tablas en html5
Formato de columna de tabla (6)
Estoy tratando de formatear una columna en una <table/> usando un elemento <col/> . Puedo establecer background-color , el width , etc., pero no puedo establecer el font-weight la font-weight . ¿Por qué no 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>
¿Has intentado aplicar el estilo a través de una clase de CSS?
Lo siguiente 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>
Por lo que yo sé, solo puedes formatear lo siguiente usando CSS en el elemento <col> :
- color de fondo
- frontera
- anchura
- visibilidad
Esta página tiene más información.
Herb tiene razón, es mejor darle estilo a los <td> directamente. Lo que hago es lo siguiente:
<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>
Sin embargo, esto no funcionará en IE.
Una etiqueta col debe estar dentro de una etiqueta colgroup . Esto puede tener algo que ver con el problema.
Leí esto mientras intentaba diseñar una tabla de modo que la primera columna fuera en negrita y las otras cuatro columnas fueran texto normal. Usar la etiqueta col parecía ser el camino a seguir, pero si bien podía establecer el ancho de las columnas con el atributo de ancho, el font-weight: bold no funcionaría. Gracias por señalarme en la dirección de la solución. Diseñando todos los elementos td {font-weight: bold;} y luego usando un selector de hermanos adyacente para seleccionar las columnas 2-5 y redélalos a la td + td {font-weight: normal;} normal td + td {font-weight: normal;} Voila, todo bien: )
Su mejor opción es aplicar su estilo directamente a las etiquetas <td> . Nunca utilicé la etiqueta <col> , pero la mayoría de los navegadores te permiten aplicar el formato en el nivel <table> y <td> / <th> , pero no en un nivel intermedio. Por ejemplo, si tiene
<table>
<tr class="Highlight">
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
</table>
entonces este CSS no funcionará
tr.Highlight { background:yellow }
pero esto será
tr.Highlight td { background:yellow }
Además: supongo que su código anterior es solo para fines de demostración y en realidad no va a aplicar estilos en línea.
Es posible que haya necesitado esto:
tr td:first-child label {
font-weight: bold;
}