1

este código se aplica a toda la fila cuando me pongo por encima, afectando a todas las celdas de esa fila:

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

Lo que necesito conseguir es que se aplique a toda la columna cuando me pongo por encima de una celda, afectando así a todas las celdas de esa columna.

¿Alguna idea?

2
  • 3
    Revisa este código.
    – A. Cedano
    el 25 ene. a las 17:10
  • Muchas gracias y si quisiera poner color a la letra de todos los td de la columna seleccionada como lo haría?
    – Aphans
    el 25 ene. a las 17:46

2 respuestas 2

1

Siguiendo los ejemplos que te comentaron, el resultado final de tu tabla sería algo como:

table {
  overflow: hidden;
  display: inline-block;
}

td, th {
  border: 1px solid #999;
  padding: 10px;
  position: relative;
}

tr td:hover::after { 
  background-color: red;
  content: '';  
  height: 10000px;    
  left: 0;
  position: absolute;  
  top: -5000px;
  width: 100%;
  z-index: -1;        
}

td:hover { 
  color: blue;
  font-weight: bold;
}
<table>
  <tr>
    <th>Columna 1</th>
    <th>Columna 2</th>
    <th>Columna 3</th>
  </tr>
  <tr>
    <td>Fila 1</td>
    <td>Fila 1</td>
    <td>Fila 1</td>
  </tr>
  <tr>
    <td>Fila 2</td>
    <td>Fila 2</td>
    <td>Fila 2</td>
  </tr>
  <tr>
    <td>Fila 3</td>
    <td>Fila 3</td>
    <td>Fila 3</td>
  </tr>
</table>

2
  • @Aphans coméntame aquí, cual height te refieres? el ancho de los tD? puedes reducir el padding... el 25 ene. a las 20:26
  • Es lo que te comenté en el otro comentario
    – Aphans
    el 25 ene. a las 21:54
1

Te dejo un ejemplo de cómo resolverlo.

table {
  overflow: hidden;
}
td,
th {
  position: relative;
}
td:hover::after,
th:hover::after {
  content: '';
  position: absolute;
  background-color: #ffa;
  left: 0;
  top: -5000px;
  height: 10000px;
  width: 100%;
  z-index: -1;
}

Más información en esta página. https://css-tricks.com/simple-css-row-column-highlighting/

8
  • Muchas gracias y si quisiera poner color a la letra de todos los td de la columna seleccionada como lo haría?
    – Aphans
    el 25 ene. a las 17:47
  • No funciona, puedes comprobarlo. Aparte necesito que las columnas pares tengan un background por defecto de otro color y que se aplique el código de respuesta para ellas también
    – Aphans
    el 25 ene. a las 18:10
  • @Aphans te hice una respuesta en base a lo que querías, me avisas. el 25 ene. a las 19:23
  • @Cris223511.dev Justo lo que deseaba, pero necesito que el height no se ve tan alto porque se me ve muy feo y sobresale del tr
    – Aphans
    el 25 ene. a las 20:25
  • 1
    Lo solventé poniendo un background blanco al caption, pero muchas gracias!
    – Aphans
    el 26 ene. a las 7:36

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.