CSS, селектор, таблица

Question

У меня есть HTML <table>.

Я хочу, чтобы столбцы 2 и 4 этой таблицы были скрыты с помощью CSS. Есть ли способ заставить CSS определять номер столбца элемента td?

Answer 1

Используйте jQuery, если можете:

$("table td:nth-child(2)").addClass("col2");
$("table td:nth-child(4)").addClass("col4");

CSS:

.col2, .col4 { display: none }

Answer 2

Некоторые ответы CSS 3 были даны. Совместимое с CSS 2 решение будет выглядеть следующим образом, при условии, что вы можете как-то идентифицировать таблицу (представьте, что у нее есть класс «foo»):

table.foo > tbody > tr > td:first-class + td, /* column 2 */
table.foo > tbody > tr > td:first-class + td + td + td /* column 4 */
{display: none;}

Обратите внимание, что здесь не выбираются элементы или заголовки в thead или tfoot. Вы можете скопировать два селектора, чтобы прочитать «th», но если вы можете доверять целостности вашей разметки, чтобы не иметь ничего, кроме th и td внутри tr и tr только в thead, tfoot или tbody (единственные допустимые возможности); Вы могли бы сделать что-то вроде этого:

table.foo > * > tr > :first-class + *, /* column 2 */
table.foo > * > tr > :first-class + * + * + * /* column 4 */
{display: none;}

Это нормально работает в браузерах, более новых, чем IE6, как правило, что почти всегда приемлемо.

---

Если поддержка IE6 является обязательной - и быть совершенно уверенным, что она есть, прежде чем потрудиться идти по этому пути - комбинация действительных CSS2 / 3 и Javascript в условном комментарии является самым простым решением использование Javascript для макета, когда работа не требуется).

Answer 3

Взгляните на nth-child и nth-of-type псевдоклассы.

Что-то вроде

td:nth-of-type(2) { visible: false; }
td:nth-of-type(4) { visible: false; }

Answer 4

Добавьте классы в соответствующие строки, и затем вы сможете использовать их, чтобы скрыть эти строки.

Существуют селекторы nth-child, но они будут работать только в более новых браузерах.

Answer 5

Спасибо всем, мне пришлось использовать jquery, я не мог найти, как это сделать с чистого CSS2, IE не поддерживает CSS3 :(

Answer 6

Можно, но поскольку это CSS3, он не будет работать в IE и более старых версиях Firefox и некоторых других браузерах. Выезд : nth-child .

ИМХО, лучшее, что вы могли бы сделать, это добавить класс в каждую строку, на которую хотите нацелиться.

Answer 7

Вы можете сделать это с помощью селекторов CSS 3 - в частности, :nth-child. Обратите внимание, что в настоящее время это решение не будет работать в большинстве браузеров (в основном оно работает только в Firefox 3.1b и выше).

Если у вас нет доступа к изменению классов и вы не можете использовать JavaScript, то, боюсь, вам не повезло.