3

我有一个table所有第一列都是右对齐的文本。是否有可能仅将文本向左对齐，其中tdalign 属性已经正确？

为了更好地理解：

对齐预览

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

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

4

4 回答 4

2

您可以通过td在第一个tr跨table表的所有行并将其设置为100%. 然后设置white-space: nowrap' tds 确保它们占用足够的空间以将其内容放在一行中。

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;
}
于 2013-09-12T11:01:09.143 回答
2

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

改变;

text-align: right;

至;

padding-left: 35%;

...或类似的值。

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

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

于 2013-09-12T11:04:00.403 回答
0

尝试width从.tcl td

.tcl td {
     text-align:left;
}
于 2013-09-12T10:47:28.967 回答
0

如何将第一个 td 浮动到右侧。

.tcl td:first-child {
     float:right;
}
于 2013-09-12T11:09:18.570 回答