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

Posted 2023-05-07

【中文标题】如何清除表格行中元素的换行？

【英文标题】：How to clear line-through for an element in a table row?

【发布时间】：2011-08-13 02:49:06

【问题描述】：

我在“清除”我在表格行上使用的线路时遇到问题。我不希望链接上的直通效果。我正在使用 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;

有什么建议吗？

【问题讨论】：

MDC 说：“文本装饰跨越后代元素。这意味着不可能在后代上禁用在其祖先之一上指定的文本装饰。”

确实是很好的信息，谢谢。

【参考方案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;

【参考方案2】：

我不确定，为什么没有人指出。这实际上是可能的。

这里是小提琴的链接

JSFiddle

在您不想显示直通的元素上添加display: inline-block 即可解决问题。

试试：

.table-item td 
  text-decoration: line-through;

.table-item a 
  text-decoration: none;
  display: inline-block;

【参考方案3】：

根据您的浏览器要求（在旧 IE 中无法使用），您可以使用：

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

【参考方案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>

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