Tengo una tabla con un borde inferior de 1px para cada columna. En el desplazamiento de la fila, quiero establecer el borde en 2px, vea el ejemplo:

tr td {
  border-bottom: 1px solid grey;
}

tr:hover td {
   border-bottom: 2px solid red;
}
<table>
  <tr><td>foo</td><td>bar</td></tr>
  <tr><td>foo</td><td>bar</td></tr>
</table>

Al pasar el mouse, la fila aumenta en altura y mueve la siguiente fila 1px hacia abajo.

¿Puedo aumentar el tamaño del borde sin afectar la altura?

2
ar099968 31 oct. 2019 a las 12:14

6 respuestas

La mejor respuesta

Pruebe border-image como a continuación:

tr td {
  border-bottom: 2px solid transparent;
  border-image:linear-gradient(to top,grey 1px,transparent 0) 2;
}

tr:hover td {
  border-image:linear-gradient(to top,red 2px,transparent 0) 2;
}
<table>
<tr><td>foo</td><td>bar</td></tr>
<tr><td>foo</td><td>bar</td></tr>
</table>

O el mismo gradiente que el fondo:

tr td {
  padding-bottom:2px;
  background:linear-gradient(to top,grey 1px,transparent 0);
}

tr:hover td {
  background:linear-gradient(to top,red 2px,transparent 0);
}
<table>
<tr><td>foo</td><td>bar</td></tr>
<tr><td>foo</td><td>bar</td></tr>
</table>
4
Temani Afif 31 oct. 2019 a las 09:34

También puede intentarlo estableciendo una altura específica y configurando box-sizing:border-box

tr td {
  border-bottom: 1px solid grey;
  height:30px;
  box-sizing:border-box;
}

tr:hover td {
   border-bottom: 2px solid red;
}
<table>
  <tr><td>foo</td><td>bar</td></tr>
  <tr><td>foo</td><td>bar</td></tr>
</table>
0
FBR 31 oct. 2019 a las 09:32

Cuando aumenta el tamaño, su línea se vuelve más alta (debido a su nuevo borde) si solo desea aumentar la altura sin cambiar el tamaño de la línea, haga lo siguiente:

Tr: hover td {border-bottom: 2px solid red; altura: su altura anterior-1}

-1
sari 31 oct. 2019 a las 09:25

Puede usar outline para lograr lo mismo, pero el esquema se aplica a elemento completo

Entonces puede usar box-shadow para crear un esquema en un lado. Al igual que outline, box-shadow no cambia el tamaño del modelo de caja.

tr td {
  box-shadow: 0 -1px 0 #000 inset;
}

tr:hover td {
  box-shadow: 0 -2px 0 #f00 inset;
}
<table>
  <tr>
    <td>foo</td>
    <td>bar</td>
  </tr>
  <tr>
    <td>foo</td>
    <td>bar</td>
  </tr>
</table>
0
Sibasish Mohanty 31 oct. 2019 a las 09:31

Puede usar box-shadow para crear un estilo de borde que no afecte a la altura del elemento.

0
skalta 31 oct. 2019 a las 09:17

Puede disminuir el relleno inferior, lo que disminuirá la altura de td y no afectará su altura de td.

tr td {
  border-bottom: 1px solid grey;
}

tr:hover td {
   border-bottom: 2px solid red;
   padding-bottom: 0px;**strong text**
}
<table>
  <tr><td>foo</td><td>bar</td></tr>
  <tr><td>foo</td><td>bar</td></tr>
</table>
1
Maajid Siddiqui 31 oct. 2019 a las 09:23