it-swarm.com.ru

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

59
vchoke

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

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

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

37
sblundy

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

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

81
yoavf

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

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

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

28
series0ne

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

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

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

19
Neil Aitken

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

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

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

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

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

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

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

10
Kurt Poehler

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

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

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

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

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

2
Jim R.

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

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

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

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

1
rachel

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

1
Kevin Le - Khnle

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

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

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

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

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

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

0
sunilr