Cómo usar el atributo de clase en html col

Este es mi código:

  .left-info { font-size:14px; font-family:Tahoma, Helvetica, sans-serif; color:#1A5B71; font-weight:bold; text-align:right; } .right-info { font-size:14px; font-family:Tahoma, Helvetica, sans-serif; color:#FFFFFF; font-weight:bold; text-align:left; }   
3476896 My first HTML
5869207 My first CSS

Pero, muestra una tabla simple. Necesitas ayuda !!

Mira aquí
http://www.w3.org/TR/CSS21/tables.html#columns

Solo puede establecer el border , el background , el width y la visibility con col s


editar

solución jQuery

Con este pequeño fragmento de jQuery puedes copiar todos los nombres de clase de las tags col a las tags td correspondientes
Funciona incluso con colspan en las tags col y td , así como con las tablas anidadas.

Ejemplo aquí como jsfiddle

JavaScript

 $(document).ready(function() { var find_TDs_at_COL = function(table, col) { var ret = []; $(table).children('tbody').children('tr').each(function() { var col2 = 0; $(this).children('td,th').each(function() { oldCol2 = col2; if ($(this).attr('colspan')) { col2 += parseInt($(this).attr('colspan')); } else { col2++; } if (oldCol2 <= col && col2 > col) { ret.push(this); } }) }) return $(ret); } $('table > colgroup').each(function() { var $table = $(this).parent(); var col = 0; $(this).children('col').each(function() { var oldCol = col if ($(this).attr('colspan')) { col += parseInt($(this).attr('colspan')) } else { col++; } for (var i = oldCol; i < col; i++) { find_TDs_at_COL($table, i).addClass($(this).attr('class')) } }) }) })​ 
 $(document).ready(function() { "use strict"; var find_TDs_at_COL = function(table, col) { var ret = []; $(table).children('tbody').children('tr').each(function() { var col2 = 0; $(this).children('td,th').each(function() { var oldCol2 = col2; if ($(this).attr('colspan')) { col2 += parseInt($(this).attr('colspan')); } else { col2++; } if (oldCol2 <= col && col2 > col) { ret.push(this); } }) }) return $(ret); } $('table > colgroup').each(function() { var $table = $(this).parent(); var col = 0; $(this).children('col').each(function() { var oldCol = col if ($(this).attr('colspan')) { col += parseInt($(this).attr('colspan')) } else { col++; } for (var i = oldCol; i < col; i++) { find_TDs_at_COL($table, i).addClass($(this).attr('class')) } }) }) }) 
 .left-info { font-size:14px; font-family:Tahoma, Helvetica, sans-serif; color:#1A5B71; font-weight:bold; text-align:right; } .right-info { font-size:14px; font-family:Tahoma, Helvetica, sans-serif; color:#00FFFF; font-weight:bold; text-align:left; } .extra-info { font-size:14px; font-family:Tahoma, Helvetica, sans-serif; color:#ff0000; font-style: italic; text-align:right; } .additional-info { font-size:10px; font-family:Tahoma, Helvetica, sans-serif; color:#ffdd00; } 
  
A B C C C D
3476896 My first HTML Extra Yes Add
5869207 My first CSS Ugh Don't trust
54379 My first JS Trust

Aunque la respuesta dada aquí es de aproximadamente un año en este punto, pensé que simplemente señalaría que puedes hacer esto fácilmente con CSS muy simple.

En lugar de intentar asignar la clase a cada td en su columna, simplemente puede orientarlos de la siguiente manera:

 td:first-child{ color: #1A5B71; text-align: right; } td:last-child{ color: #FFFFFF; text-align: left; } 

El uso de JavaScript para completar esta tarea es una exageración completa

He escrito una pequeña secuencia de comandos jQuery para esto que aplica la clase a cada elemento th y td en la tabla de colspan .

Pruébalo aquí

JavaScript:

 $(function () { $('colgroup').each(function () { var $colgroup = $(this) var classes = $colgroup.children().map(function () { return $(this).attr('class') }) $colgroup.siblings().children('tr').each(function () { var col = 0 $(this).children().each(function () { var $child = $(this) $child.addClass(classes[col]) col += parseInt($child.attr('colspan')) || 1 }) }) $colgroup.remove() }) }) 

La secuencia de comandos no es complicada, pero aquí están los pasos:

  1. Para cada colgroup
    • almacenar en caché los nombres de clase que tienen los col
  2. Por cada tr en la misma mesa
    • establecer una var col a 0
  3. Para cada niño de tr ( th s y td s)
    • agregar una clase, seleccionada con col
    • incremente col por su atributo colspan o 1 si no está presente, de modo que en la próxima iteración, el script sabrá qué clase seleccionar
  4. Quite el colgroup completo, ya que podría, por ejemplo, tener un fondo que no tenga una opacidad de 1, lo que daría como resultado que los segundos y td tengan un fondo con una opacidad incorrecta.

Guardo en caché $(this) un par de veces, porque es más rápido almacenar en caché los objetos de jQuery que llamar a $() cada vez que desea seleccionar un elemento.

    Intereting Posts