Posicionar elementos dentro de una celda (td) de una tabla HTML

publicado por: Anonymous

Actualmente tengo una columna de una tabla de datos, donde se muestra un número al lado derecho y un icono al lado izquierdo dentro de la misma celda.

Sin embargo, me gustaría se mostrará en sentido contrario (número a la izquierda, icono a la derecha) como se muestra en la imagen.

actual vs deseado

A continuación muestro un fragmento del código:

HTML

_x000D_

_x000D_

<!DOCTYPE html>_x000D_
<html>_x000D_
<head>_x000D_
  <meta charset="utf-8">_x000D_
  <meta name="viewport" content="width=device-width">_x000D_
  <title>JS Bin</title>_x000D_
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons"_x000D_
      rel="stylesheet">_x000D_
</head>_x000D_
<body>_x000D_
<table>_x000D_
<tr>_x000D_
    <td>_x000D_
    <div style="float: left;">_x000D_
      42_x000D_
    </div>      _x000D_
    <div style="float: right;">_x000D_
      <i aria-hidden="true" class="v-icon material-icons theme--light" style="font-size: 16px; color: rgb(255, 82, 82); caret-color: rgb(255, 82, 82);">_x000D_
        error_outline_x000D_
      </i>_x000D_
    </div>_x000D_
  </td>_x000D_
 </tr>_x000D_
  <tr>_x000D_
    <td>_x000D_
      <div style="float: left;">_x000D_
        -326_x000D_
      </div>      _x000D_
    <div style="float: right;">_x000D_
      <i aria-hidden="true" class="v-icon material-icons theme--light" style="font-size: 16px; color: rgb(255, 82, 82); caret-color: rgb(255, 82, 82);">_x000D_
        error_outline_x000D_
      </i>_x000D_
    </div>_x000D_
  </td>_x000D_
 </tr>_x000D_
  <tr>_x000D_
    <td>_x000D_
      <div style="float: left;">_x000D_
       127_x000D_
      </div>      _x000D_
  </td>_x000D_
 </tr>_x000D_
_x000D_
</table>_x000D_
</body>_x000D_
</html>

_x000D_

_x000D_

_x000D_

La idea no es crear otra columna adicional para ubicar el icono, sino dentro de la misma celda posicionar el icono y el número para dar la sensación de que estaban divididos por una línea y el número alineado a la derecha.

Intenté cambiar el orden y el float y se muestra esto:

introducir la descripción de la imagen aquí

Pero el 42 no se muestra como espero porque quiero que todos los números se encuentren alineados a la derecha.

Agradezco su colaboración.

solución

Intenta reemplazar el Float por el Display en los DIV y las TD las alineas a la derecha de la siguiente manera:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
    <table border="1">
        <tr>
            <td style="text-align: right;">
                <div style="display: inline-block;">
                    42
                </div>      
                <div style="display: inline-block;">
                    <i aria-hidden="true" class="v-icon material-icons theme--light" style="font-size: 16px; color: rgb(255, 82, 82); caret-color: rgb(255, 82, 82);">
                        error_outline
                    </i>
                </div>
            </td>
        </tr>
        <tr>
            <td style="text-align: right;">
                <div style="display: inline-block;">
                    -326
                </div>      
                <div style="display: inline-block;">
                    <i aria-hidden="true" class="v-icon material-icons theme--light" style="font-size: 16px; color: rgb(255, 82, 82); caret-color: rgb(255, 82, 82);">
                        error_outline
                    </i>
                </div>
            </td>
        </tr>
        <tr>
            <td style="text-align: right;">
               <div style="display: inline-block;">
                  127
               </div>      
               <div style="display: inline-block; width:16px;">
               </div>
            </td>
         </tr> 
    </table>
</body>
</html>
Respondido por: Anonymous

Leave a Reply

Your email address will not be published.