Стилизация последнего тд в таблице с помощью css - PullRequest
59 голосов
/ 11 декабря 2008

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

Ответы [ 14 ]

1 голос
/ 11 декабря 2008

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

<style type="text/css">
table td { 
  h: expression(this.style.border = (this == this.parentNode.lastChild ? 'none' : '1px solid #000' ) );
}
</style>
1 голос
/ 11 декабря 2008

Не прямой ответ на ваш вопрос, но использование

может помочь вам достичь того, что вам нужно, и, конечно, вы можете использовать tfoot.
0 голосов
/ 26 сентября 2009

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

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

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...