CSS-селектор для всех строк данных в определенном столбце HTML-элемента таблицы

Question

Я хотел бы добавить имя класса CSS "currency" в заголовок (th) столбца моей таблицы и выровнять все дочерние ячейки данных (td) в столбце вправо.

MyЛучшая попытка:

table th.currency td {
    text-align: right;
}

Однако это, очевидно, не работает.Я пытался сделать его прямыми потомками ">", но это тоже не сработало.

Я хотел бы избежать добавления отдельного имени класса "currency" ко ВСЕМ ячейкам td.У кого-нибудь есть решение?

Answer 1

Если вы знаете номер столбца, вы можете использовать css-селектор n-го дочернего элемента для всех trs в таблице.

table tr td:nth-child(n /*this is the column number*/)
{
    text-align: right;
}

Вот jsfiddle

Редактировать:Вы также можете присвоить таблицам уникальные идентификаторы и нацелить их таким образом:

#table1 tr td:nth-child(3 /*this is the column number*/)
{
    text-align: right;
}
#table2 tr td:nth-child(2 /*this is the column number*/)
{
    text-align: right;
}
#table3 tr td:nth-child(5 /*this is the column number*/)
{
    text-align: right;
}

Answer 2

Использование jQuery:

$.each($('th.currency'),function(idx,val) {

    var table = $(this).parent().parent();
    var colNumber = $(this).parent("tr").children().index($(this));
    var rows = table.children("tr");
    rows.find("td:nth-child(" + (colNumber + 1) + ")").addClass("currency");

});

Рабочая jsFiddle: http://jsfiddle.net/8XSLF/

Если класс валюты не выровнен по правому краю, вместо этого вы можете использовать функцию css:

    rows.find("td:nth-child(" + (colNumber + 1) + ")").css("text-align","right");

Это может быть сделано в сценарии, доступном для многих страниц, но не может быть сделано только одним CSS.

Answer 3

добавить запятую (,) между таблицами, th и td (ваши не применяются к th и td