在右对齐的单元格中左对齐文本

Question

我有一个table，其中所有第一列都是右对齐的文本。是否有可能只在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*/
}

编辑：很多人都不明白我的意思。文本对齐不仅可以将文本移动到父项的选定一侧，还可以更改文本彼此对齐的方式。

所以我想要实现的是

   first   row
   second  row
   third   row

而不是这个

    first  row
   second  row
    third  row

因此，第一列中的文本在两种情况下均与右侧对齐，但文本的对齐在第一种情况下保留，而在第二种情况下则保持正确。我希望这可以解释这件事。

Answer 1

您可以通过在td的第一个tr中添加额外的table来执行此操作，该100%跨越表格的所有行并将其设置为宽度white-space: nowrap 。然后在td上设置<table> <tr> <td rowspan="999"></td> <td>text</td> </tr> <tr> <td>longer text</td> </tr> </table> 可确保它们占用足够的空间以便将其内容放在一行上。

jsFiddle

<强> HTML

table {
    width: 100%;
}
tr:first-child td:first-child {
    width: 100%;
}
td {
    white-space: nowrap;
}

<强> CSS

{{1}}

Answer 2

您是否乐意使用填充来对齐文本？

更改;

text-align: right;

要;

padding-left: 35%;

......或类似的价值。

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

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

Answer 3

尝试从width

中删除.tcl td

.tcl td {
     text-align:left;
}

Answer 4

如何将第一个td向右浮动。

.tcl td:first-child {
     float:right;
}