css - 如何清除表格行中元素的换行？

Question

我在“清除”我在表格行上使用的线路时遇到了麻烦。我不希望链接上的直通效果。我正在使用 Javascript 动态更改 tr 类，所以我希望它尽可能简单。

我当前的代码：

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您不想显示 line-through 的元素就可以了。

尝试：

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

Answer 3

根据您的浏览器要求（不适用于旧 IE），您可以使用：

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

Answer 4

使用跨度，不可能吗？

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>

或者您是否严格使用代码注入来设置删除线的样式？