在左边和右边对齐a <td>

Question

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

Answer 1

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.

Answer 2

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

Answer 3

虽然我同意Oli的评论，但我猜你可以通过使用float:left和float:right来实现它。

Answer 4

If you put another table inside the TD with two TD's, one left and one right aligned, it will work and I will get down voted for such a suggestion.

Another mechanism is to use display: inline-block as suggested by @rcravens -- my personal choice.