右对齐的单元格中如何左对齐文本

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*/
}

编辑：很多人没有真正理解我的意思。text-align 不仅将文本移动到父元素的选定侧面，而且还会改变文本彼此对齐的方式。

所以我想要实现的是这样的效果：

   first   row
   second  row
   third   row

不要这样写

    first  row
   second  row
    third  row

因此，第一列中的文本在两种情况下都向右对齐，但是在第一种情况下，文本的对齐方式是左对齐，在第二种情况下是右对齐。希望这解释清楚了这件事。

- Biker John

---

我担心你没有理解。这里唯一的问题是第一列。我希望整个表格都在右侧，但我希望字符的对齐方式是左对齐（文本从左侧相同点开始）。请查看图片。 - Biker John

你不能改变CSS吗？为什么不移除 text-align: right？ - Mr_Green

@Mr_Green 因为否则它会将文本移动到列的左侧。我不希望它被移动到左侧，只是希望文本左对齐（从同一点开始）。 - Biker John

@Mr_Green 他想要一个类似于文本缩进的效果，使得该列尽可能靠近第一列的右边缘。 - Marc Audet

我想我明白你的意思了。请看下面我的回答。 - olimortimer

Answer 1

您可以通过在表格的第一个标签中添加一个额外的标签，并将其跨越整个表格的所有行，并将其宽度设置为100%来实现。然后，在这些标签上设置"white-space: nowrap"，确保它们占用足够的空间以适应单行内容的大小。 jsFiddle HTML

<table>
    <tr>
        <td rowspan="999"></td>
        <td>text</td>
    </tr>
    <tr>
        <td>longer text</td>
    </tr>
</table>

CSS

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

- Mathijs Flietstra

---

是的，它解决了我的问题。虽然没有必要将最后一个子元素右对齐。我希望两列在一起，并且文本左对齐。 :) - Biker John

啊，好的，我理解了你第一次尝试解释问题，误解了第二次尝试 :) 我会将答案回滚到之前的版本。 - Mathijs Flietstra

Answer 2

你愿意使用填充来对齐文本吗？如果不是，请看下面的方法进行更改：

text-align: right;

致；

padding-left: 35%;

…或类似的值。

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

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

- olimortimer

---

是的，这就是我的意思。宽度已经固定了，所以没有必要使用JavaScript来检查更改。 - Biker John

@BikerJohn 如果这是你想要的，那么如果你不添加宽度，它会自动发生，对吧？fiddle。 - Mr_Green

@BikerJohn，我的解决方案难道不是这样吗？ - olimortimer

@olimortimer 是的。我只是想看看还有哪些其他解决方案。 :) - Biker John

没问题 @BikerJohn，只是想确认一下 :) - olimortimer

Answer 3

尝试从 .tcl td 中移除 width。

.tcl td {
     text-align:left;
}

- Ajay

Answer 4

把第一个td浮动到右边怎么样？

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

- Danield