如何在第一列中应用文本左对齐并在其他列中应用文本右对齐答案

【问题标题】：How to apply text-align left in the first column and text-align right in the others如何在第一列中应用文本左对齐并在其他列中应用文本右对齐
【发布时间】：2018-12-26 21:53:31
【问题描述】：

我有一个要设置样式的表格，我如何将text-align:left; 仅应用于第一列而将text-align:right; 应用于其他列？

这是我的表格示例：

http://jsfiddle.net/gianlucaguarini/hAv7P/

目前所有列都保留了文本对齐。

【问题讨论】：

您能否将标记最小化为仅相关部分，并在此处分享您的代码？

标签： css css-tables

【解决方案1】：

您可能想查看 :first-child 伪类 (W3C definition) - 这正是它的设计目的。你可以这样使用它：

.table td {
    text-align: right;
}

.table td:first-child {
    text-align: left;
}

:first-child 伪类意味着选择器只匹配每个<tr> 中的第一个<td>。

此处示例：http://jsfiddle.net/xv5Cn/1/

【讨论】：

请注意 - 您也可以使用:nth-child(n)，所以对于第二个孩子，您可以使用.table td:nth-child(2){}，依此类推...

【解决方案2】：

您需要指定以下 CSS：

.table td,
.table th
{
    text-align:left;
}

#right,
.table td + td,
.table th + th
{
    text-align:right;
}

此处示例：http://jsfiddle.net/mWeYM/

您可以在此处阅读有关相邻兄弟 CSS 选择器的更多信息：http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors

【讨论】：

谢谢，很好的解释和示范
我要将此添加到我的神秘代码集合中，这些代码以某种方式起作用

【解决方案3】：

嘿，Manna，我已经更新了你的小提琴，只需点击此链接：

http://jsfiddle.net/hAv7P/9/

你需要做的就是添加一个类到你想要对齐的类，然后像小提琴一样添加css

【讨论】：

我有点搞砸了，我无法正确对齐选项卡中的信息。折叠标签后，我想查看完全对齐的信息，如顶部标签 jsfiddle.net/mWeYM/2