How to apply text-align left in the first column and text-align right in the others

寵の児 提交于 2020-12-01 08:03:28

问题


I have a Table to style, how can I apply text-align:left; just for the first column and text-align:right; for the other columns?

Here my Table example:

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

At the moment the text-align is left for all the columns.


回答1:


You need to specify the following CSS:

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

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

Example here: http://jsfiddle.net/mWeYM/

You can read more about adjacent siblings CSS selector here: http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors




回答2:


You might want to look at the :first-child pseudo-class (W3C definition) - this is exactly the kind of thing it was designed for. You could use it like this:

.table td {
    text-align: right;
}

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

The :first-child pseudo-class means the selector only matches the first <td> in each <tr>.

Example here: http://jsfiddle.net/xv5Cn/1/




回答3:


Hey Manna i have updated your fiddle just follow this link:

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

All you need to do is add a class to the which yu want aligned and then add css as in the fiddle



来源:https://stackoverflow.com/questions/11984767/how-to-apply-text-align-left-in-the-first-column-and-text-align-right-in-the-oth

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!