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

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

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

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

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

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

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

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

вы можете использовать псевдокласс last-child

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

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

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

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

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

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

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

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

Это код, который добавит границу для всех узлов и удалит границу для последнего узла (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>

Наслаждаться ...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

должно хватить.

Вы можете использовать: last-of-type, чтобы поймать последний столбец вашей таблицы.

<style>
.table > tbody > tr > td:last-of-type {
    /* Give your style Here; */
}
</style>