Как очистить проход для элемента в строке таблицы?

Question

У меня проблемы с "очисткой" проходной строки, которую я использую в строке таблицы.Я не хочу эффект сквозной ссылки.Я динамически меняю класс tr с помощью Javascript, поэтому я хотел бы сделать его максимально простым.

Мой текущий код:

HTML:

<table>
<tr class="table-item">
<td>Text</td>
<td><a href="#">Delete item</a></td>
</tr>
</table>

CSS:

.table-item td {
text-decoration: line-through;
}
.table-item a {
text-decoration: none;
}

Есть предложения?

Answer 1

Я играл с ним в jsFiddle . Похоже, единственный способ сделать это - обернуть другой контент, который вы хотите включить line-through, в другой элемент, например span.

Обновление: код из jsFiddle, по запросу:

<table>
  <tr class="table-item">
    <td><span>Text</span></td>
    <td><a href="#">Delete item</a></td>
  </tr>
</table>

CSS:

.table-item td span {
  text-decoration: line-through;
}

Answer 2

Я не уверен, почему никто не указал.Это действительно возможно.

Вот ссылка на скрипку

JSFiddle

Добавление display: inline-block на элемент, который вы не хотитепокажите, что прямой переход сделает ваше дело.

Попробуйте:

.table-item td {
  text-decoration: line-through;
}
.table-item a {
  text-decoration: none;
  display: inline-block;
}

Answer 3

Можно ли использовать span, не может быть и речи?

a {
    text-decoration: none;  
}
td span{
text-decoration: line-through;
}

<table>
<tr class="table-item">
<td><span>Text</span></td>
<td><a href="#">Delete item</a></td>
</tr>
</table>

Или вы строго используете внедрение кода для стилизации зачеркивания?

Answer 4

В зависимости от требований вашего браузера (не будет работать в старом IE) вы можете использовать:

.table-item td:first-child {
  text-decoration: line-through;
}