Стилизация последнего тд в таблице с помощью css

Question

Я хочу стилизовать последний TD в таблице без использования класса CSS для конкретного TD.

<table>
  <tbody>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
      <td>Four</td>
      <td>Five</td>
    </tr>
  </tbody>
</table>

table td 
{ 
  border: 1px solid black;
}

Я хочу, чтобы TD, содержащий текст «Five», не имел границы, но опять же, я не хочу использовать класс.

Answer 1

Селектор :last-child должен это делать, но он не поддерживается ни в одной версии IE .

Боюсь, у вас нет выбора, кроме как использовать класс.

Answer 2

Вы можете использовать относительные правила:

table td + td + td + td + td {
  border: none;
}

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

Answer 3

Вы можете использовать псевдокласс :last-of-type:

tr > td:last-of-type {
    /* styling here */
}

См. MDN для получения дополнительной информации и совместимости с различными браузерами.
Ознакомьтесь с рекомендациями W3C CSS для получения дополнительной информации.

Answer 4

вы можете использовать класс псевдо последнего ребенка

table tr td:last-child {
    border: none;
}

Это будет стилизовать только последний тд. Он еще не полностью поддерживается, поэтому может быть неподходящим

Answer 5

Если вы уже используете javascript, взгляните на jQuery. Он поддерживает независимый от браузера селектор «последний ребенок», и вы можете сделать что-то вроде этого.

$("td:last-child").css({border:"none"})

Answer 6

попробуйте с:

tr:last-child td:last-child{
    border:none;
    /*any other style*/
}

это повлияет только на самый последний элемент td в таблице, предполагая, что это единственный элемент (иначе вам просто нужно будет идентифицировать вашу таблицу). Тем не менее, он очень общий, и он будет адаптироваться к последнему TD, если вы добавите больше контента в свою таблицу. Так что, если это частный случай

td:nth-child(5){
    border:none;
}

должно быть достаточно.

Answer 7

Javascript - это единственный жизнеспособный способ сделать это на стороне клиента (то есть CSS вам не поможет). В jQuery:

$("table td:last").css("border", "none");

Answer 8

В jQuery, при условии, что таблица создается статически или динамически до выполнения следующего:

$("table tr td:not(:last-child)").css({ "border-right":"1px solid #aaaaaa" });

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

Answer 9

Вы можете использовать элемент col, как указано в HTML 4.0 ( ссылка ). Это работает в каждом браузере. Вы можете дать ему идентификатор или класс или встроенный стиль. Единственное предостережение заключается в том, что он влияет на весь столбец во всех строках. Пример:

<table>
    <col />
    <col width="50" />
    <col id="anId" />
    <col class="whatever" />
    <col style="border:1px solid #000;" />
    <tbody>
        <tr>
            <td>One</td>
            <td>Two</td>
            <td>Three</td>
            <td>Four</td>
            <td>Five</td>
        </tr>
    </tbody>
</table>

Answer 10

Я тоже искал способ сделать это и нашел это, может быть полезным для других людей:

#table td:last-of-type { border: none; }

Обратите внимание, что IE также не поддерживается.