Використовуючи CSS, як змінити лише 2-й стовпець таблиці

126

Як використовувати лише css, як я можу переосмислити css лише 2-го стовпця таблиці.

Я можу дістатися до всіх стовпців за допомогою:

.countTable table table td

Я не можу потрапити на html на цій сторінці, щоб змінити його, оскільки це не мій сайт.

Дякую.

css

239

Ви можете використовувати :nth-childпсевдоклас так:

.countTable table table td:nth-child(2)

Зауважте, що це не працюватиме в старих браузерах (або IE), вам потрібно буде дати класам клас або використовувати javascript у цьому випадку.

— Нік Крейвер
джерело

Це дасть лише другу клітинку в кожній таблиці, а не другу клітинку в кожному рядку. Вам потрібно .countTable table table tr td: nth-child (2)

— Deeksy

3

@Deeksy - Це не точно, не байдуже, що таке селектор. nth-childзастосовується після знаходження елемента, і він nthпорівнюється з тим, у кого він є, незалежно від того, був він у селекторі чи ні. Ви можете це побачити тут: jsfiddle.net/JQQPz

— Нік Крейвер

як щодо зміни лише css елемента всередині td: nth-child (2). Як тег <a> це буде td a: nth-дитина (2) {}?

— Іво Сан

1

@ ivory-santos просто додайте aкінець, наприклад, td:nth-child(2) aдо стильових посилань під цим елементом.

— Нік Крейвер

Чому у вас є таблиця двічі (на відміну від інших відповідей нижче)?

— UlFie

26

Спробуйте це:

.countTable table tr td:first-child + td

Ви також можете повторити, щоб стилізувати інші стовпці:

.countTable table tr td:first-child + td + td {...} /* third column */
.countTable table tr td:first-child + td + td + td {...} /* fourth column */
.countTable table tr td:first-child + td + td + td +td {...} /* fifth column */

— Марко Паничі
джерело

1

Я вибрав це для ситуації, коли власники сайту, що підтримують код, не були розробниками, і це дало їм можливість змінювати вирівнювання стовпців у своїх таблицях даних дуже прямо, тому що, хоч і трохи детально, з коментарями, як ви тут, полегшили їм зрозуміти, який селекторний блок був для якого стовпця зліва. Знову не найелегантніший та найефективніший спосіб, але він спрацював!

— Ерік Бішард

18

Для зміни лише другого стовпця таблиці використовуйте наступне:

Загальний випадок:

table td + td{  /* this will go to the 2nd column of a table directly */

background:red

}

Ваш випадок:

.countTable table table td + td{ 

background: red

}

Примітка. Це працює для всіх браузерів (сучасних та старих), тому я додав свою відповідь на старе запитання

— Абзоози
джерело

Який би твік, щоб просто вибрати перший стовпець? Використовуючи таблицю td {...}, також вибираються всі комірки в інших стовпцях.

— j4v1

1

@ j4v1 table td {background: red;} // перший стовпець матиме червоний фон таблиці td + td {background: blue;} // відпочинок матиме синій

— Abzoozy

-2

Ви можете призначити клас для кожної комірки у другому стовпчику.

<table>
<tr><td>Column 1</td><td class="col2">Col 2</td></tr>
<tr><td>Column 1</td><td class="col2">Col 2</td></tr>
<tr><td>Column 1</td><td class="col2">Col 2</td></tr>
<tr><td>Column 1</td><td class="col2">Col 2</td></tr>
</table>

— Duniyadnd
джерело

Я не можу цим скористатися. Як я вже говорив, це не моя сторінка, тому я не можу змінити html.

2

@Duniyadnd це не гарний підхід, порівняно з існуючим способом використання селекторів.

— PM

-2

у цьому веб-сайті http://quirksmode.org/css/css2/column.html я знайшов такий простий спосіб

<table>
<col style="background-color: #6374AB; color: #ffffff" />
<col span="2" style="background-color: #07B133; color: #ffffff;" />
<tr>..

— DorienCragen
джерело

1

Він сказав, що не може змінювати HTML.

— Фрунгі