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

Ответ 1

У вас есть два варианта: (1) добавление специализированного класса в HTML к последней строке; или (2) с использованием псевдо-класса :last-child в вашем CSS.

Вариант 1: Специализированный класс

Если вы можете применить классы к своему HTML, вы можете добавить специализированный класс к последней строке. Если ваша разметка создается серверной стороной script (например, PHP скрипт), вам нужно будет отредактировать это script, чтобы добавить аналогичную разметку.

HTML:

<table>
   <tr>
      <td>
      </td>
   </tr>
   <tr>
      <td>
      </td>
   </tr>
   <tr class="last">
      <td>
      </td>
   </tr>
</table>

CSS

table
{
   border-collapse:collapse;
}
tr
{
   border-bottom: 1px solid #000;
}
tr.last
{
   border-bottom: none;
}

Вариант 2: псевдокласс класса CSS

Альтернативой является использование псевдо-класса :last-child CSS. Использование класса :last-child не требует каких-либо изменений в HTML и поэтому может быть лучшим выбором, если вы не можете изменить HTML. CSS почти идентичен приведенному выше:

CSS

table
{
   border-collapse:collapse;
}
tr
{
   border-bottom: 1px solid #000;
}
tr:last-child
{
   border-bottom: none;
}

Недостатком этого подхода является то, что версии Internet Explorer до 9 не поддерживают псевдокласс class :last-child.

Ответ 2

Я знаю, что это старый вопрос, но стоит упомянуть, что теперь с CSS3 все, что вам нужно сделать, это селектор not() в вашем CSS, например:

tr:not(:last-child) {
    border-bottom: 1px solid #E3E3E3;
}

Ответ 3

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

Сохраняет ваш класс в последнем теге.

Ответ 4

это используется с любым вызовом класса в html

tr:last-child {
    border-bottom: none;
}

Ответ 5

Если вы используете jQuery, вы можете использовать следующие script

$(document).ready(function() {
    $(".tableClass tr:not(:last) > td").css('border-bottom', ' 1px solid #DDD');
});

Ответ 6

Вы также можете использовать этот способ

table tr:not(:last-of-type) { border-bottom: none; }