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?
6 respuestas
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>
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>
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}
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>
Puede usar box-shadow para crear un estilo de borde que no afecte a la altura del elemento.
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>
Preguntas relacionadas
Nuevas preguntas
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].