html - 右对齐单元格中的左对齐文本

Question

我有一个表，其中所有第一列都是右对齐的文本。是否可以在 td 的对齐属性已经正确的情况下仅将文本左对齐？

为了更好的理解:

HTML:

<table class='tcl'>
<tr>
<td>first column</td>
<td>second column</td>
</tr>
...
</table>

CSS:

.tcl {
    border-spacing:0;
    border-collapse:collapse;
    width:100%;
}

.tcl tr {

    height:50px;
}

.tcl td {

     width:50%;
     text-align:left;
}

.tcl td:first-child {

     text-align:right;
     /* i would like to align the text of this right aligned column to the left*/
}

编辑: 很多人并不真正理解我的意思。 Text-align 不仅将文本移动到父级的选定一侧，而且还会更改文本彼此对齐的方式。

所以我想实现的是这个

   first   row
   second  row
   third   row

不是这个

    first  row
   second  row
    third  row

因此，第一列中的文本在两种情况下都右对齐，但文本在第一种情况下左对齐，在第二种情况下右对齐。我希望这能解释问题。

Answer 1

您喜欢使用内边距来对齐文本吗？

改变；

text-align: right;

到;

padding-left: 35%;

...或类似的值。

http://jsfiddle.net/seG2S/3/

您可以使用 Javascript 来确定列的宽度，并更新填充。