Formato de columnas de tabla

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

  •  03-07-2019
  •  | 
  •  

Pregunta

Estoy intentando formatear una columna en un <table/> usando un <col/> elemento.puedo configurar background-color, width, etc., pero no puedo configurar el 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>
¿Fue útil?

Solución

Hasta donde yo sé, solo puede formatear lo siguiente usando CSS en el elemento <col>:

  • color de fondo
  • borde
  • ancho
  • visibilidad

Esta página tiene más información.

Herb tiene razón: es mejor diseñar 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.

Otros consejos

Lo mejor que puedes hacer es aplicar tu peinado directamente sobre la <td> etiquetas.nunca he usado el <col> etiqueta, pero la mayoría de los navegadores le permiten aplicar formato en el <table> y <td>/<th> nivel, pero no en un nivel intermedio.Por ejemplo si tienes

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

También:Supongo que el código anterior es solo para fines de demostración y en realidad no aplicará estilos en línea.

Es posible que haya necesitado esto: 

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

Leyendo esto mientras intentaba diseñar una tabla de modo que la primera columna fuera texto en negrita y las otras cuatro columnas fueran texto normal.Usar la etiqueta col parecía el camino a seguir, pero aunque podía establecer el ancho de las columnas con el atributo ancho, el peso de fuente:Bold no funcionaría gracias por señalarme en la dirección de la solución.Diseñando todos los elementos td td {font-weight: bold;} y luego usar un selector de hermanos adyacente para seleccionar las columnas 2 a 5 y darles estilo de nuevo a la normalidad td + td {font-weight: normal;}Listo, todo bien :)

¿Has intentado aplicar el estilo a través de una clase CSS?

Parece que lo siguiente funciona: 

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

Referencia para el elemento col

Una etiqueta col debe estar dentro de una etiqueta colgroup, esto puede ser algo relacionado con el problema.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top