Вопрос по css, html-table, css-selectors, html – Выберите только первую строку в таблице с помощью CSS

5

У меня на странице HTML много таблиц, некоторые из которых используют толькоtr & td другие используют все, что могут:thead, tbody, tfoot, tr, th & td.

Поскольку некоторые проблемы, мы используем правило CSS, чтобы сделать верхнюю и левую границу таблицы и каждыйtd имеет свою правую и нижнюю границу.

Потому что именно эту вещь нам нужно получитьtdЭто во всех четырех углах и вокруг их конкретного угла.

Как я могу сделать одно правило, которое может выбрать только первую строку в таблице?

Я использую это правило до сих пор:

table.unit tr:first-child td:first-child, table.units thead tr:first-child th:first-child {
  border-top-left-radius: 10px;
}
table.unit tr:first-child td:last-child, table.units thead tr:first-child th:last-child {
  border-top-right-radius: 10px;
}

В этом jsfiddle вы можете увидеть мою проблему :(http://jsfiddle.net/NicosKaralis/DamGK/)

Есть ли способ решить 2 реализации одновременно?если есть, как я могу это сделать?если нет, можете ли вы помочь мне придумать лучший способ сделать это?

П.С .: Я могу изменить элемент таблиц, но это сделает намного больше рефакторинга в сторонних библиотеках, поэтому мы не хотим этого менять.

Я предполагаю, что он хочет выделить ячейки в углу стола, независимо от того, как упаковщики таблиц, такие какthead, tbody а такжеtfoot. danijar
Я не думаю, что это выполнимо только с помощью CSS. У вас есть jQuery? isherwood
Я бы предпочел использовать только CSS, но если это единственный вариант, я бы предпочел изменить таблицу и провести рефакторинг Nicos Karalis
Ваша скрипка не иллюстрирует описание вашей проблемы. Вы хотите выбрать только первую и последнюю ячейки первой строки во всей таблице, независимо от того, находится ли строка вthead, tbody или жеtfoot? Как насчет последнего ряда? Что нужно сделать, если есть как ячейки заголовка, так и ячейки данных? BoltClock♦

Ваш Ответ

3   ответа
3
Я думаю, что вы были слишком конкретны

обновленный: в исходном ответе не было прямых дочерних селекторов, чтобы препятствовать распространению дочерних селекторных элементов среди внуков и т. д.

я верюэта скрипка показывает, что вы хотите. Он просто использует этот код для выбора углов элементов таблицы, независимо от конфигурации:

/* This works for everything */
.unit > :first-child > :first-child > :first-child, /* Top left */
.unit > :first-child > :first-child > :last-child,  /* Top right */
.unit > :last-child > :last-child > :first-child,  /* Bottom left */
.unit > :last-child > :last-child > :last-child    /* Bottom right */
{
    background: red;
}

Конечно, вы могли бы использоватьtable.unit если твой.unit класс ставится на другие элементы, кромеtable несколько сузить выбор, но ключ в том, чтобы дочерние селекторы были расплывчатыми.

@danijar: Хороший звонок, мне нужно обновить с помощью прямых дочерних селекторов. ScottS
Этот подход нарушает разметку всякий раз, когда HTML-элементы вложены в ячейки таблицы. danijar
0

у HTML, и есть решение, использующее чистый CSS, чтобы получить эффект, о котором вы спрашивали. С помощью:first-child а также:last-child на столе упаковочные элементыthread, tbody а такжеtfoot позволяет выбирать только ячейки по углам всей таблицы. Вот подробности.

* селектор просто выбирает все элементы. Но> Это означает применить эффект только к прямым детям. Поэтому мы выбираем все перечисленные выше элементы переноса таблицы. Нет более глубоких детейtable любитьtr или жеtd находятся под влиянием.

Чтобы включить обаth а такжеtdопять используем* вместе с> выбрать всех прямых потомков строки таблицы, независимо от того, являются ли ониth или жеtd, Вместо этого вы можете определить селектор для обоих аналогично.

.unit > *:first-child > tr:first-child > *:first-child,
.unit > *:first-child > tr:first-child > *:last-child,
.unit > *:last-child  > tr:last-child  > *:first-child,
.unit > *:last-child  > tr:last-child  > *:last-child {
    background: red;
}

я сделалрабочая демо на основе кода, который вы предоставили на вопрос.

В любом случае, вы не сказали нам, для чего вам это нужно, и, возможно, есть лучший способ добиться этого. Например, если вы хотите предоставить закругленные углы, вы можете применить эффект кtable элемент оберточного див.

0

tr td:first-child, tr th:first child {some styles}
thead + tbody tr td:first-child {revert the above styles}

Однако я не понимаю, как бы вы справились с такой же ситуацией для tfoot. Возможно, вам придется использовать сценарии.

Есть скрипка? Это основной выбор сестер. isherwood
хорошо, мне удается выбрать только первую строку таблицы (jsfiddle.net/NicosKaralis/DamGK/2), но теперь, как я могу выбрать только те, которые внизу? Nicos Karalis
Я попробовал ваше решение, но все еще не смог его исправить Nicos Karalis
Процитирую себя: «Я не понимаю, как бы вы справились с такой же ситуацией для пользователя». :-) Проблема в том, что вы не можете выбратьпредыдущий брат с CSS. isherwood
Хорошо, теперь я получил это, позвольте мне проверить это Nicos Karalis

Похожие вопросы