EDITAR

Para ser más claro, lo siguiente es lo que estoy tratando de lograr.

enter image description here

Estoy tratando de crear una tabla donde cada fila tenga un borde de píxel único con un radio (que imite un estilo de borde contraído). Al pasar el cursor sobre una fila, me gustaría que el borde de la fila seleccionada cambie de color. Casi lo he logrado con el siguiente código, pero al pasar el cursor sobre una fila, la siguiente fila cae 1px para dejar espacio para el borde flotante.

table {
    border-collapse: separate;
    border-spacing: 0;
}

td {
    border: solid 1px black;
    border-style: solid none;
    padding: 10px;
    border-bottom: 0;
}

td:first-child {
    border-left-style: solid;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

td:last-child {
    border-right-style: solid;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
}

tr:last-child td {
    border-bottom: solid 1px black;
}

tr:hover {
    /*background-color: #cad6ed;*/
}

tr:hover td {
    border: 1px solid #12A0F8;
    border-style: solid none;
    padding: 10px;
}

tr:hover td:first-child {
    border-left-style: solid;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

tr:hover td:last-child {
    border-right-style: solid;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
}
<table>
  <tr>
    <td>One</td><td>Two</td><td>Three</td>
  </tr>
  <tr>
    <td>One</td><td>Two</td><td>Three</td>
  </tr>
  <tr>
    <td>One</td><td>Two</td><td>Three</td>
  </tr>
</table>

¿Hay un mejor enfoque para esto?

Muchas gracias de antemano.

html css css-tables
1
chut319 24 oct. 2019 a las 18:18

3 respuestas

La mejor respuesta

Mejor solución actualizada

No sé por qué no abordé el problema central desde el principio, pero su problema principal era que el elemento a continuación estaba siendo empujado hacia abajo, bien, puede apuntar al siguiente elemento y establecer el borde superior en ninguno

tr:hover + tr td {
    border-top: none;
}

El resto de su código original permanece intacto.

table {
    border-collapse: separate;
    border-spacing: 0;
}

td {
    border: solid 1px black;
    border-style: solid none;
    padding: 10px;
    border-bottom: 0;
}

tr:hover + tr td {
    border-top: none;
}

td:first-child {
    border-left-style: solid;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

td:last-child {
    border-right-style: solid;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
}

tr:last-child td {
    border-bottom: solid 1px black;
}

tr:hover {
    /*background-color: #cad6ed;*/
}

tr:hover td {
    border: 1px solid #12A0F8;
    border-style: solid none;
    padding: 10px;
}

tr:hover td:first-child {
    border-left-style: solid;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

tr:hover td:last-child {
    border-right-style: solid;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
}
<table>
  <tr>
    <td>One</td><td>Two</td><td>Three</td>
  </tr>
  <tr>
    <td>One</td><td>Two dfds</td><td>Three</td>
  </tr>
  <tr>
    <td>One</td><td>Two</td><td>Three</td>
  </tr>
</table>

Vieja respuesta

Puede hacerlo configurando tr para mostrar el bloque. Usé margin-top -1px para ocultar el borde extra. Para simplificar las cosas, eliminé el borde de td y simplemente lo puse en tr ya que de todos modos no tienes bordes entre tds

El índice z al pasar el mouse hace que el elemento suspendido aparezca con el borde

Puse el margen negativo en todos los tr, pero el primero, probablemente podría salirse con la suya en todos los tr s

table {
  border-collapse: separate;
  border-spacing: 0;
}

td {
  padding: 10px;
}

tr {
  border-radius: 10px;
  border: 1px solid #000;
  display: block;
  box-sizing: border-box;
  position: relative;
}

tr:not(:first-child) {
  margin-top: -1px;
}

tr:hover {
  z-index: 2;
  border: 1px solid blue;
}
<table>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
</table>
2
Huangism 24 oct. 2019 a las 17:17

Eliminar borde inferior: 0; en la etiqueta td

table {
  border-collapse: separate;
  border-spacing: 0;
  z-index:0;
}

td {
  border: solid 1px black;
  border-style: solid none;
  padding: 10px;
  border-bottom: 0;
}

td:first-child {
  border-left-style: solid;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

td:last-child {
  border-right-style: solid;
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
}

tr:last-child td {
  border-bottom: solid 1px black;
}

tr:hover td{
  border-color: #12A0F8;
  border-bottom: solid 1px #12A0F8;
  padding-bottom: 9px;
}
<table>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
</table>
0
Jone Milka 25 oct. 2019 a las 03:40

EDITAR: Incluye CSS var() y actualiza el marcado HTML para incluir esa var.

Debe eliminar la propiedad border-width al pasar el mouse y simplemente usar border-color También debe superponer los elementos tr para que el borde parezca ser un píxel.

He actualizado la respuesta para usar z-index y un valor negativo top. Tenga en cuenta que esto solo funcionará con tres elementos tr, si necesita una solución dinámica, la respuesta se puede actualizar en función de cómo genera la tabla.

table {
  border-collapse: separate;
  border-spacing: 0;
}

tr {
  position: relative;
  z-index: 1;
  top: var(--rowCount);
}

td {
  border: solid 1px black;
  border-style: solid none;
  padding: 10px;
}

td:first-child {
  border-left-style: solid;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

td:last-child {
  border-right-style: solid;
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
}

tr:last-child td {
  border-bottom: solid 1px black;
}

tr:hover {
  /*background-color: #cad6ed;*/
  z-index: 5;
}

tr:hover td {
  border-color: #12A0F8;
  border-style: solid none;
  padding: 10px;
}

tr:hover td:first-child {
  border-left-style: solid;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

tr:hover td:last-child {
  border-right-style: solid;
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
}
<table>
  <tr style="--rowCount: 0px">
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
  <tr style="--rowCount: -1px">
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
  <tr style="--rowCount: -2px">
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
  <tr style="--rowCount: -3px">
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
</table>

https://jsfiddle.net/disinfor/nhp3o8xw/31/

1
disinfor 24 oct. 2019 a las 17:09
58544396

Preguntas relacionadas

30 ¿Cómo puedo cambiar la clase de un elemento con JavaScript?

Nuevas preguntas

2 Campo de configuración obligatorio y valor vacío
2 Cómo eliminar el último espacio vacío en css flex
2 no pudo hacer una buena tabla en css (necesita ayuda)
3 parseInt ni parseFloat ni coerción de cadenas ni Number () convirtiendo cadena en número
2 El juego Vanilla JavaScript Flip Card no funciona
3 ¿Cómo hacerlo usando flex?
3 Cómo mover una imagen debajo del texto usando solo css
2 ¿Problemas al controlar el margen de un área de texto HTML?
3 No puedo encontrar la causa del desplazamiento horizontal
4 cómo crear un bucle javascript para mostrar una salida 100 veces
Nuevas preguntas con la etiqueta html >

html

HTML (HyperText Markup Language) es el lenguaje de marcado para crear páginas web y otra información que se mostrará en un navegador web. Las preguntas sobre HTML deben incluir un ejemplo mínimo reproducible y una idea de lo que está tratando de lograr. Esta etiqueta rara vez se usa sola y, a menudo, se combina con [CSS] y [javascript].

Más sobre html...