CSS - <td> alineado a la derecha

 
Vista:
sin imagen de perfil

<td> alineado a la derecha

Publicado por Eduardo (5 intervenciones) el 12/05/2020 22:58:14
Saludos,

Tengo un <table> para mostrar una lista de precios, se ve asi:


lista-medi

Necesito alinear todo lo que son numeros a la derecha, ya he probado con <td align="right"> y no me funciona, a continuación mi html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<?php
 
    echo "<table>";
 
       echo "<tr>";
       echo "<th>C&oacutedigo</th>";
       echo "<th>Producto</th>";
       echo "<th>Marca</th>";
       echo "<th>P.V.F.</th>";
       echo "<th>Pack</th>";
       echo "<th>Dias</th>";
       echo "<th>PRECIO</th>";
       echo "<th>Pedido</th>";
       echo "</tr>";
       ...
             echo "<tr>";
             echo "<td>".$row_codi."</td>";                    // CODIGO
             echo "<td>".utf8_encode($row_prod)."</td>";       // PRODUCTO
             echo "<td>".$row_mark."</td>";                    // MARCA
             echo "<td align='right'>".$row_pvf."</td>";       // PVF
             echo "<td align='right'>".$row_pack."</td>";      // PACK
             echo "<td align='right'>".$row_dias."</td>";      // DIAS
             echo "<td align='right'>".$row_prec."</td>";      // PRECIO
             // PEDIDO
             echo "<td><center>
                <form action='lista_agregar.php' method='post'>
                   <input type='hidden' name='lista_num' value='$row_nume'>
                   <input type='number' name='lista_ped' size='8' maxlength='5' min='0' max='9000' value='$row_pedi'>
                   <input type='submit' value='Agregar' $botn_activ>
                </form>
                </center></td>" ;
 
             echo "</tr>";
 
       }
 
    echo "</table>";
 
?>

Y aquí el segmento del css que estila el <table>:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.listadeprecios {
    grid-area: lista;
    display: flex ;
    justify-content: center ;
    background-color: rgb(255,255,255) ;
}
 
.listadeprecios table {
    width: 100%;
}
 
.listadeprecios table th {
    padding: 10px;
    background-color: #48577D;
    color: #fff;
    text-align: center;
}
 
.listadeprecios table tr {
    color: white ;
    background-color: #778899;
}
 
.listadeprecios table td {
    padding: 5px;
    text-align: left;
}

Agradeceré cualquier ayuda al respecto. Cordiales saludos.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Joel
Val: 870
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

<td> alineado a la derecha

Publicado por Joel (252 intervenciones) el 13/05/2020 08:09:25
Hola Eduardo, yo le pondria una clase y lo alinearia con text-align... algo así:

1
2
3
4
5
6
7
8
echo "<tr>";
echo "<td>".$row_codi."</td>";                    // CODIGO
echo "<td>".utf8_encode($row_prod)."</td>";       // PRODUCTO
echo "<td>".$row_mark."</td>";                    // MARCA
echo "<td class='right'>".$row_pvf."</td>";       // PVF
echo "<td class='right'>".$row_pack."</td>";      // PACK
echo "<td class='right'>".$row_dias."</td>";      // DIAS
echo "<td class='right'>".$row_prec."</td>";      // PRECIO

y crearia el class right en css
1
.right {text-align:right;}


Te sirve?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

<td> alineado a la derecha

Publicado por Eduardo (5 intervenciones) el 16/05/2020 18:23:49
Bueno por lo visto en este foro no hay mucho ánimo de ayudar.

Para aquellos que recién están empezando con CSS como yo, les comento que revisando con el Inspector de FireFox, me percaté que mi estilo si estaba siendo leido, PERO NO APLICADO, aquí la prueba de ello:

align-der

Como ven, el navegador aplica el estilo al <th>, luego al <tr> y luego al <td>, pero cualquier estilo posterior que se asigne a estas etiquetas es ignorado.

Pensando se me ocurrió aplicar una estrategia, utilizar un tag <p align='right'> dentro del tag <td> y que creen, FUNCIONA !

1
2
3
4
5
6
7
8
9
10
...
    echo "<tr>";
    echo "<td>".$row_codi."</td>";                                       // CODIGO
    echo "<td>".utf8_encode($row_prod)."</td>";                // PRODUCTO
    echo "<td>".$row_mark."</td>";                                     // MARCA
    echo "<td><p align='right'>".$row_pvf."</p></td>";        // PVF
    echo "<td><p align='right'>".$row_pack."</p></td>";       // PACK
    echo "<td><p align='right'>".$row_dias."</p></td>";       // DIAS
    echo "<td><p align='right'>".$row_prec."</p></td>";       // PRECIO
...

Y ahora se vé así:

align-der-2

Saludos y gracias por nada.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

<td> alineado a la derecha

Publicado por Marcelo (1 intervención) el 21/07/2023 14:38:54
Hace rato estaba buscando esta solucion GRACIASSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar