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.

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