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

Nuevas preguntas

2 Mostrar la versión corta o completa del texto
3 La posición relativa que causa el problema mi contenedor va debajo de la vitrina ¿Por qué está sucediendo?
2 Mostrar unidades de medida para un producto
3 ¿Existe algún método para agregar estilo de arranque al campo de entrada de contraseña de Django?
2 ¿Por qué mi llamada ajax hace que la página no responda en la segunda llamada?
2 Bootstrap 4 Table ¿Cómo igualar los anchos de columna?
2 ¿Cómo puedo evitar que mi página se actualice cuando envío un formulario sin retrasar mi página como loco?
3 ¿Cómo puedo diseñar viñetas para que tengan un fondo borroso y un centro sólido?
2 ¿Cómo veo el menú que aparece en la barra desplegable?
2 ¿Puede Angular generar documentos HTML válidos?
Nuevas preguntas con la etiqueta html >

html

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

html...