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

Я хочу создать последний 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, содержащий текст "Пять", не имел границы, но опять же, я не хочу использовать класс.

Ответ 1

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

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

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

Ответ 2

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

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

Ответ 3

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

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

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

Ответ 4

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

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

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

Ответ 5

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

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

Ответ 6

попробуйте:

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

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

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

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

Ответ 7

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

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

Ответ 8

Вы можете использовать элемент 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>

Ответ 9

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

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

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

Ответ 10

Не прямой ответ на ваш вопрос, но использование <tfoot> может помочь вам в достижении того, что вам нужно, и, конечно же, вы можете создать стиль tfoot.

Ответ 11

Для IE, как насчет использования выражения CSS:

<style type="text/css">
table td { 
  h: expression(this.style.border = (this == this.parentNode.lastChild ? 'none' : '1px solid #000' ) );
}
</style>

Ответ 12

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

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

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

Ответ 13

Это код, который добавит границу для всех узлов и удалит границу для последнего node (TD).

<style type="text/css">
    body {  
        font-family:arial;font-size: 8pt;  
    }  
    table td{
        border-right: #666 1px solid
    }  

    table td {  
        h: expression(this.style.border = (this == this.parentNode.lastChild ? 'none' : 'border-right:  0px solid' ) );  
    }  
</style>
<table>
    <tr>
        <td>Home</td>
        <td>sunil</td>
        <td>Kumar</td>
        <td>Rayadurg</td>
        <td>Five</td>
        <td>Six</td>
    </tr>
</table>

Наслаждайтесь...

Я хочу то же, что и вместо границы, я хотел бы использовать изображения...: -)

Ответ 14

Существует и другой подход.. и это будет работать для таблиц, которые не являются статическими... в основном используйте <th> вместо <td> для этого столбца:

<style type="text/css">
 table td { border: 1px solid black; }
 table th { border: 0px; }
<style>
<table>
  <tbody>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
      <td>Four</td>
      <th>Five</th>
    </tr>
    <tr>
      <td>One</td>
      <td>Two</td>
      <td>Three</td>
      <td>Four</td>
      <th>Five</th>
    </tr>
  </tbody>
</table>