html: columna de la tabla desplazada

Question

¿Cómo puedo cambiar la columna de fondo de una tabla html columna cuando el mouse está sobre ella?

Preferiblemente solo con CSS.

Answer 1

Solo funciona para celdas o filas, lo siento. p.

td { 
    background-color: blue; 
} 

td:hover { 
    background-color: red; 
} 

Existen soluciones de JavaScript disponibles pero nada en CSS en este momento hará lo que quiera debido a las limitaciones de los selectores.

td /* all cells */ 
{ 
    background-color: blue; 
} 

tr /* all rows */ 
{ 
    background-color: pink; 
} 

/* nothing for all columns */ 

Answer 2

No creo que haya una forma limpia de HTML + CSS para hacer esto. Javascript es una alternativa, por ejemplo, jQuery tableHover plugin

Answer 3

Puede experimentar con <col> etiqueta y col:hover { background: red; } estilo, pero dudo que va a trabajar. De todos modos, esto definitivamente no funcionará en versiones anteriores de MSIE, por lo que necesitarás javascript para poder hacer esto.

Answer 4

Tuve un problema similar cuando tenía demasiadas columnas para mostrar en la pantalla. VIA PHP, convertí cada fila en una tabla de columnas de 1 x. Entonces, n filas = n tablas. Luego anidé cada tabla dentro de una tabla maestra. Hacerlo me permitió llamar a td: hover desde mi hoja de estilos. Como cada td contiene una tabla, tiene el mismo efecto de resaltar una columna cuando la paso sobre ella.

Answer 5

puede resaltar toda la fila con CSS puro usando:

tr td {background-color: red;} 
tr:hover td {background-color: blue;} 

El logro de este efecto para una columna es imposible con este enfoque, como la célula (TD) es un niño de una fila (TR), no una columna.

Para que funcione en IE7 +, asegúrese de agregar declaración de doctype (lo que siempre debe hacer :)).

Answer 6

Esto se puede hacer usando CSS sin Javascript.

Utilicé el pseudo-elemento ::after para resaltar. z-index mantiene el resaltado debajo del <tds> en caso de que necesite manejar eventos de clic. Usar una altura masiva le permite cubrir toda la columna. overflow: hidden en el <table> oculta el desbordamiento de las altas luces.

Demostración: http://jsfiddle.net/ThinkingStiff/2XeYe/

Salida:

CSS:

table { 
    border-spacing: 0; 
    border-collapse: collapse; 
    overflow: hidden; 
    z-index: 1; 
} 

td, th { 
    cursor: pointer; 
    padding: 10px; 
    position: relative; 
} 

td:hover::after { 
    background-color: #ffa; 
    content: '\00a0'; 
    height: 10000px;  
    left: 0; 
    position: absolute; 
    top: -5000px; 
    width: 100%; 
    z-index: -1;   
} 

HTML:

<table> 
    <tr> 
     <th></th><th>50kg</th><th>55kg</th><th>60kg</th><th>65kg</th><th>70kg</th> 
    </tr> 
    <tr> 
     <th>160cm</th><td>20</td><td>21</td><td>23</td><td>25</td><td>27</td> 
    </tr> 
    <tr> 
     <th>165cm</th><td>18</td><td>20</td><td>22</td><td>24</td><td>26</td> 
    </tr> 
    <tr> 
     <th>170cm</th><td>17</td><td>19</td><td>21</td><td>23</td><td>25</td> 
    </tr> 
    <tr> 
     <th>175cm</th><td>16</td><td>18</td><td>20</td><td>22</td><td>24</td> 
    </tr> 
</table> 

Answer 7

i hav e una solución más sencilla (ejemplo vivo: http://jsfiddle.net/q3HHt/1/)

HTML:

<table> 
    <tr> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
    </tr> 
    <tr> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
    </tr> 
</table> 

CSS:

table, td { 
    border: 1px solid black; 
} 

td { 
    width: 40px; 
    height: 40px; 
} 

.highlighted { 
    background-color: #348A75; 
} 

jQuery:

$('td').hover(function() { 
    var t = parseInt($(this).index()) + 1; 
    $('td:nth-child(' + t + ')').addClass('highlighted'); 
}, 
function() { 
    var t = parseInt($(this).index()) + 1; 
    $('td:nth-child(' + t + ')').removeClass('highlighted'); 
}); 

ejemplo vivo: http://jsfiddle.net/q3HHt/1/

Answer 8

Sólo para extiende respuesta Muhammads (https://stackoverflow.com/a/11828637/1316280), si se desea resaltar los cols sólo en la tabla real, cambiar el jquery-código-parte para: este jsFiddle es específica sólo para el real tabla

jQuery

$('td').hover(function() { 
    var t = parseInt($(this).index()) + 1; 
    $(this).parents('table').find('td:nth-child(' + t + ')').addClass('highlighted'); 
}, 
function() { 
    var t = parseInt($(this).index()) + 1; 
    $(this).parents('table').find('td:nth-child(' + t + ')').removeClass('highlighted'); 
}); 

jsFiddle: http://jsfiddle.net/q3HHt/123/