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:

The alignment problem

Mi html se procesa así:

Processed HTML markup

El código css calculado es el siguiente:

  1. Estilo td

td css style

  1. Estilo :before

pseudo element css style

¿Alguien puede explicarme por qué está sucediendo esto y qué tengo que cambiar para que funcione como debería?

Saludos

0
epanalepsis 24 oct. 2019 a las 12:46

3 respuestas

La mejor respuesta

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>}
0
epanalepsis 24 oct. 2019 a las 13:18

Conjunto

td { vertical-align: middle }

0
Awais 24 oct. 2019 a las 10:41

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 .

0
reaper_1997 24 oct. 2019 a las 10:17