es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

continúa el color del cursor por encima del espaciado de la tabla

01 Aug, 2023 Programación

Mi tabla tiene border-collapse: seperate; y border-spacing: 50px 0;.
Al pasar el cursor, todo el fondo de la fila cambia.
El problema es que el área vacía del border-spacing no cambia.
Puedo usar padding en lugar de border-spacing, pero tengo bordes y colores de fondo en las columnas, por lo que el padding no los cambiará, solo hará que las celdas sean más grandes.
Por lo tanto, el resultado debe tener celdas separadas con bordes separados pero al pasar el cursor el fondo de toda la fila debe ser igual.


<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: seperate;
  width: 100%;
  border-spacing: 50px 0;
}

th, td {
  padding: 8px;
  text-align: left;
  border-right: 1px solid black;
    border-left: 1px solid black;
}

.second-row {
background: red;
}

tr:hover {background-color: yellow;}
</style>
</head>
<body>

<table>
<colgroup><col><col class="second-row"></colgroup>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
  </tr>
</table>

</body>
</html>

fiddle

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para resolver el problema de que el área vacía no cambia el fondo al pasar el ratón por encima, podemos agregar el color de fondo a las celdas de la tabla en lugar de toda la fila. De esta manera, el área vacía también cambiará de color al pasar el ratón por encima. Podemos lograr esto agregando una clase a cada celda de la fila al pasar el ratón por encima y estableciendo el color de fondo de esa clase. Aquí está el código actualizado:

    <!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: separate;
  width: 100%;
  border-spacing: 50px 0;
}

th, td {
  padding: 8px;
  text-align: left;
  border-right: 1px solid black;
  border-left: 1px solid black;
}

.second-row {
  background: red;
}

tr:hover td {
  background-color: yellow;
}

tr:hover .cell-hover {
  background-color: yellow;
}

.cell-hover {
  background-color: yellow;
}
</style>
</head>
<body>

<table>
<colgroup><col><col class="second-row"></colgroup>
  <tr>
    <th>Nombre</th>
    <th>Apellido</th>
    <th>Puntos</th>
  </tr>
  <tr>
    <td class="cell-hover">Peter</td>
    <td class="cell-hover">Griffin</td>
    <td class="cell-hover">$100</td>
  </tr>
  <tr>
    <td class="cell-hover">Lois</td>
    <td class="cell-hover">Griffin</td>
    <td class="cell-hover">$150</td>
  </tr>

</table>

</body>
</html>

    Aquí hemos agregado una nueva clase cell-hover a cada celda de la tabla y hemos establecido el color de fondo en amarillo al pasar el ratón por encima. Luego, agregamos la misma clase a cada celda de la fila sobre la que se pasa el ratón para asegurarnos de que toda la fila cambie su color de fondo. Finalmente, agregamos .tr:hover .cell-hover para establecer el color de fondo en amarillo para el área vacía del border-spacing.

    Puedes ver el código actualizado en JSFiddle.

Comments are closed.