Tengo un problema muy específico dentro de una vista web que estoy creando para dispositivos móviles. Tengo un table dentro de la vista web que se reorganiza verticalmente para pantallas de teléfonos inteligentes. Para la reorganización, oculto la línea de cabecera table y tomo el nombre de la columna como pseudo elemento :before de un atributo data-label en el elemento html original.
Ahora el problema es que el pseudo elemento y el contenido td no se alinearán verticalmente, a pesar de que ambos elementos están flotando opuestos. Estoy seguro de que la razón es la longitud del texto dentro del elemento td, pero no sé por qué.
Aquí hay una imagen de lo que está sucediendo:
Mi html se procesa así:
El código css calculado es el siguiente:
- Estilo
td
- Estilo
:before
¿Alguien puede explicarme por qué está sucediendo esto y qué tengo que cambiar para que funcione como debería?
Saludos
3 respuestas
Encontré la solución yo mismo ...
El problema era, de hecho, la compilación de sintaxis .cshtml razor.
Dado que esos campos de fecha se colocaron dentro de una instrucción c # if, formateé el código como de costumbre:
@if(startDate != DateTime.MinValue)
{
<td class="ta-left" data-label="Start">@startDate</td>
}
La identificación del texto y los saltos de línea para el código limpio aquí fueron el problema.
El compilador de cuchillas insertó un descanso para esas partes. El problema podría solucionarse utilizando el siguiente marcado de maquinilla de afeitar:
@if(startDate != DateTime.MinValue){<td class="ta-left" data-label="Start">@startDate</td>}
Conjunto
td {
vertical-align: middle
}
La razón por la que enfrenta este problema es porque está utilizando el estilo flotante en td: before.
Index.html
<table class="table table-hover theme-1">
<thead>
<tr>
<th colspan="2">Table 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span>Table col</span>
</td>
</tr>
</tbody>
Coloque una etiqueta span en la celda td y dele el ancho máximo. Así:
max-width: 50%;
display: block;
Y en la sección anterior, agregue el ancho máximo restante. Me gusta esto:
td:before {
position: absolute;
content: "shaane shane";
right: 0;
max-width: 50%;
top: 50%;
transform: translateY(-50%);
}
PD Configúrelo usando el atributo position , no use float .