Question

我有一个非常简单的表，有两行和两列。我希望第一列中的文本右对齐，第二列左对齐。我确信这很容易，但我无法理解。

这是HTML：

<table>
 <tr><td>Previous:</td><td>Link 1</td></tr>
 <tr><td>Next:</td><td>Link 2</td></tr>     
</table>

我该怎么做？

Answer 1

我会在这个例子中使用类。你可能会喜欢，但这是最好的支持方式。

CSS

.alignright { text-align: right; }
.alignleft { text-align: left; }

HTML

<td class="alignright"> </td>
<td class="alignleft"> </td>

您可以通过添加填充，边距和更多类来进一步。根据您的TABLE css，您可能需要添加一些填充，以便单元格不是所有填充：0并且不显示任何对齐。

Answer 2

您可以使用:first-child定位第一列中的单元格：

td {
    text align: left;
}

td:first-child {
    text-align: right;
}

但是:first-child: doesn’t work in IE 6，所以你可能想要在第一列的单元格中添加一个类，然后使用它：

<table>
 <tr><td class="first">Previous:</td><td>Link 1</td></tr>
 <tr><td class="first">Next:</td><td>Link 2</td></tr>     
</table>

td {
    text align: left;
}

td.first {
    text-align: right;
}

如上所述，这将适用于所有<td>元素，因此您可能还需要在表中添加一个类，并将样式限制为该表中的<td>：

<table class="simple">
 <tr><td class="first">Previous:</td><td>Link 1</td></tr>
 <tr><td class="first">Next:</td><td>Link 2</td></tr>     
</table>

table.simple td {
    text align: left;
}

table.simple td.first {
    text-align: right;
}

Answer 3

作为替代方案，并根据您的方案，如果您能够 - 为什么不用<td>替换第二列中的<th>，那么CSS将是真的简单：

td { text-align:right; }
th { text-align:left; }

Answer 4

在每个td元素上设置不同的类

<style>
    td.raligned {text-align: right;} 
    td.leftaligned {text-align: left;} 
</style>

<table>
    <tr>
        <td class="raligned">blah</td>
        <td class="leftaligned">blah</td>
    </tr>
</table>

Answer 5

这很容易。创建一个CSS类

<style>
.aleft {text-align: left;}
.aright {text-align: right;}
</style>

现在将类添加到您的表中，这很容易。

<table>
<tr><td class="aright">Previous:</td><td>Link 1</td></tr>
<tr><td class="aleft">Next:</td><td>Link 2</td></tr>     
</table>

Answer 6

HTML

<table>
   <tr>
     <td class="right-align">Previous:</td>
     <td class="left-align">Link 1</td>
   </tr>
   <tr>
     <td class="right-align">Next:</td>
     <td class="left-align">Link 2</td>
   </tr>     
</table>

你的样式表..

td.right-align {
    text-align: right;
}

td.left-align {
    text-align: left;
}

Answer 7

使用

<col align=right>

在<table>元素内，右对齐IE上的第一列，

td:first-child { text-align: right; }

在更符合标准的浏览器上做同样的事情。

默认情况下，数据单元格（td元素）左对齐，因此您无需对第二列执行任何操作。

Answer 8

我个人建议不要使用表并使用CSS解决方案，这里说的是一个jsfiddle选项。与其他人说的基本相同，但是使用jsfiddle你可以操纵它并进行更改，这样你就可以立即看到它们。

http://jsfiddle.net/rhoenig/rnAVH/

使用CSS对齐表格中的文本

8 个答案: