Создайте первый столбец <td> таблицы по-разному

Ответ 1

Вы можете использовать n-й селектор для детей.

для таргетинга на n-й элемент, который вы могли бы использовать:

td:nth-child(n) {  
  /* your stuff here */
}

Ответ 2

Если вам нужно поддерживать IE7, более совместимым решением будет следующее:

/* only the cells with no cell before (aka the first one) */
td {
    padding-left: 20px;
}
/* only the cells with at least one cell before (aka all except the first one) */
td + td {
    padding-left: 0;
}

Также отлично работает с li; общий селектор sibling ~ может быть более подходящим со смешанными элементами, такими как заголовок h1, за которым следуют абзацы и подзаголовок, а затем снова другие абзацы.

Ответ 3

Это должно помочь. Его CSS3: первый ребенок, где вы должны сказать, что первый tr таблицы, которую вы хотели бы стиль. http://reference.sitepoint.com/css/pseudoclass-firstchild

Ответ 4

Псевдо-классы : nth-child() и : nth-of-type() позволяют выбирать элементы с формулой.

Синтаксис : nth-child (a + b), где вы заменяете a и b на номера по вашему выбору.

Например, nth-child (3n + 1) выбирает 1-го, 4-го, 7-го и т.д. детей.

td:nth-child(3n+1) {  
  /* your stuff here */
}

: nth-of-type() работает одинаково, за исключением того, что он рассматривает только элемент данного типа (в примере).

Ответ 5

Чтобы выбрать первый столбец таблицы, вы можете использовать этот синтаксис

tr td: nth-child (1n + 2) {padding-left: 10px;}