Моделирование последнего td в таблице с CSS

60
задан Brian Tompsett - 汤莱恩 15 September 2016 в 15:25
поделиться

11 ответов

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

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

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

37
ответ дан sblundy 24 November 2019 в 17:29
поделиться

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

<style type="text/css">
table td { 
  h: expression(this.style.border = (this == this.parentNode.lastChild ? 'none' : '1px solid #000' ) );
}
</style>
1
ответ дан Liggy 24 November 2019 в 17:29
поделиться

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

1
ответ дан Kevin Le - Khnle 24 November 2019 в 17:29
поделиться

Можно использовать элемент седла, как определено в 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 24 November 2019 в 17:29
поделиться

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

$("td:last-child").css({border:"none"})
16
ответ дан joshperry 24 November 2019 в 17:29
поделиться

Вы могли использовать последний дочерний psuedo класс

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

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

19
ответ дан Neil Aitken 24 November 2019 в 17:29
поделиться

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

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

83
ответ дан newfurniturey 24 November 2019 в 17:29
поделиться

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

$("table td:last").css("border", "none");
3
ответ дан nickf 24 November 2019 в 17:29
поделиться

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

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

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

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

2
ответ дан 24 November 2019 в 17:29
поделиться

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

<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
ответ дан 24 November 2019 в 17:29
поделиться