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

我無法「清除」我在表格行中使用的一條直通線。我不希望鏈接上出現直通效果。我用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; 
}

有什麼建議？

來源

2011-04-26 frapser

[MDC]（https://developer.mozilla.org/en/CSS/text-decoration#Notes）表示：「文本修飾跨後代元素繪製。這意味着，不可能在後代上禁用在其祖先中指定的文本裝飾。「 – 2011-04-26 14:54:38

這確實是很好的信息，謝謝。 – frapser 2011-04-26 16:09:10

我在jsFiddle上玩過它。似乎唯一的方法就是將其他內容打包在另一個元素上，例如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; 
}

來源

2011-04-26 14:58:21

根據瀏覽器的要求（不會在舊的IE瀏覽器），你可以使用：

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

來源

2011-04-26 15:04:50 jeroen

正在使用跨度，沒有問題？

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>

或者你是否嚴格使用代碼注入來設計刪除線？

來源

2011-04-26 15:13:30

我不確定，爲什麼有人沒有指出。這實際上是可能的。

這裏擺弄

JSFiddle

您不想顯示線路通過將這樣的伎倆元素的添加display: inline-block的鏈接。

嘗試：

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

來源

2016-09-28 08:27:19 Gags

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

回答

相關問題