EDITAR
Para ser más claro, lo siguiente es lo que estoy tratando de lograr.
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.
3 respuestas
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>
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>
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/
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].