How to clear line-through for an element in a table row?
I'm having trouble "clearing" a line-through that I'm using on a table row. I don't want the line-through effect on the link. I'm changing the tr class dynamically with Javascript so I would like to keep it as simple as possible.
My current code:
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;
}
开发者_JAVA技巧
Any suggestions?
I was playing with it in jsFiddle. Seems like the only way to do it is to wrap the other content that you want the line-through
on in another element, like a span
.
Update: code from jsFiddle, as requested:
<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;
}
I am not sure, why anyone has not pointed out. This is actually possible.
Here is the link to fiddle
JSFiddle
Adding
display: inline-block
on element which you dont want to show line-through will do the trick.
Try:
.table-item td {
text-decoration: line-through;
}
.table-item a {
text-decoration: none;
display: inline-block;
}
Depending on your browser requirements (won't work in old IE) you can use:
.table-item td:first-child {
text-decoration: line-through;
}
Is using span, out of the question?
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>
Or are you strictly using code injection to style the strikethrough?
精彩评论