I am writing a page for role-playing with some friends. When it comes to the character sheet we would like to have some tables with the statistics. I would like to have inside every cell the name of the characteristic (strength, intelligence, etc.) and the number. Like this: http://jordi.dyndns-at-home.com:3000/characters/2
I would like to align the names to the left side of the cell and the numbers to the right side.
I have tried with <span style="text-align:right;"> and it will not work. I have tried with <div style="text-align:right;"> and it does work but it "jumps a line", if I use display:inline it will not work.
It is possible to have both alignments on a <td> ?
BTW position:absolute; right:0 won't work. it will align to the end of the not the end of the
Use definition lists and be semantic.
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;
}
This way you can drop the whole table.
Here is an example:
<table>
<tr>
<td>
<span class='name'>name 1</span><span class='number'>100</span>
</td>
</tr>
</table>
With the following CSS:
.name{
width: 200px;
display: inline-block;
}
.number{
width: 200px;
display: inline-block;
text-align: right;
}
Hope you find this helpful. Here is a jsFiddle for you to mess with.
http://jsfiddle.net/K4fGq/
Bob
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With