Alineando a la izquierda y derecha dentro de <td>

Estoy escribiendo una página para jugar papeles con algunos amigos. Cuando se trata de la hoja de personaje, nos gustaría tener algunas tablas con las estadísticas. Me gustaría tener dentro de cada celda el nombre de la característica (fuerza, inteligencia, etc.) y el número. De esta manera: http://jordi.dyndns-at-home.com:3000/characters/2 Alineando a la izquierda y derecha dentro de <td>

Me gustaría alinear los nombres a la izquierda de la celda y los números a la derecha.

He intentado con < span style = "text-align: right;" > y no funcionará. Lo he intentado con < div style = "text-align: right;" > y funciona, pero "salta una línea", si uso display: en línea no funcionará.

Es posible tener ambas alineaciones en un <td>?

BTW posición: absoluta; Derecha: 0 no funcionará. se alineará al final del no final de

Fuente

2010-12-28 Jordi

¿No es más fácil simplemente poner los nombres y números en sus propios td? – Oli

Seguramente lo es, pero no tengo prisa y me gustaría aprender al hacer esa página web. – Jordi

Use listas de definiciones y sea semántico.

HTML

<table><tr><td> 
    <dl> 
     <dt>Life:</dt> 
     <dd>15</dd> 
    </dl> 
</td></tr></table>

CSS

dl { 
    width: 200px; 
} 
dl dt { 
    width: 160px; 
    float: left; 
    padding: 0; 
    margin: 0; 
} 
dl dd { 
    width: 40px; 
    float: left; 
    padding: 0; 
    margin: 0; 
}

De esta manera se puede soltar toda la tabla.

Fuente

2010-12-28 20:17:39 erenon

Pero no creo que pueda dejar caer la mesa. Quiero que la tabla se vea – Jordi

@Jordi: dale un borde al dl (y ajusta el ancho) para que parezca una tabla. O mejor. – erenon

Aunque estoy de acuerdo con el comentario de Oli, supongo que puede lograrlo usando float:left y float:right.

Fuente

2010-12-28 20:19:34 jeroen

Aquí se muestra un ejemplo:

<table> 
    <tr> 
     <td> 
      <span class='name'>name 1</span><span class='number'>100</span> 
     </td> 
    </tr> 
</table>

Con el siguiente CSS:

.name{ 
    width: 200px; 
    display: inline-block; 
} 
.number{ 
    width: 200px; 
    display: inline-block; 
    text-align: right; 
}

Esperamos que encuentre útil esta información. Aquí hay un jsFiddle para que te metas.

http://jsfiddle.net/K4fGq/

Bob

Fuente

2010-12-28 20:20:26 rcravens

OMG, la solución es buena, ¡pero jsfiddle es maravilloso! ¡Gracias una tonelada! – Jordi

¿Qué pasa si el ancho no es estático, si quiero dar ancho en '%' puedo darlo? – KumarDharm

Si pones otra tabla dentro de la TD con dos TD, uno izquierdo y uno alineado a la derecha, va a trabajar y voy a bajar votado a favor de esta sugerencia.

Otro mecanismo es usar display: inline-block según lo sugerido por @rcravens: mi elección personal.

Fuente

2010-12-28 20:22:07 Don

Alineando a la izquierda y derecha dentro de <td>

Respuesta

Cuestiones relacionadas