CSS Line-Through not being removed
I've got some code that puts a line-through on a TR for deleted rows, but this means that my "Actions" column (that only has) buttons suffers. This is because there are individual spaces between the buttons, which wind up getting line-throughed as well.
After poking around on W3Schools, it boggles me why this example doesn't work:
<html>
<head>
<style type="text/css">
tr {text-decoration:line-through}
</style>
</head>
<body>
<table>
<tr>
<td>this needs to be line-throughed</td>
<td style="text-decoration: none !important;">This shouldn't be line-throughed.</td>
</tr>
</table>
</body>
</html>
How am I supposed to clear the line-through on child elements?
EDIT I've updated my example - the problem is that I do not want to take the style 开发者_如何学JAVAoff the parent element, just a single child element.
You shouldn't have to use important or inline styles for this. Try
h2 {text-decoration:line-through;}
h2 span {text-decoration: none; border: 1px solid black;}
EDIT
In that case with tr since yeah you applied text-decoration to it, you have to take text-decoration off the same element tr not td. Otherwise do:
tr td { text-decoration: whatever }
and then when needed
<td style="text-decoration: none;"></td>
There was a similar question a little while back and according to that answer you can't do what you're trying to accomplish.
EDIT: Given your example, why not just apply the line-through to TD elements individually
<html>
<head>
<style type="text/css">
td.deleted {text-decoration:line-through}
</style>
</head>
<body>
<table>
<tr>
<td class="deleted">this needs to be line-throughed</td>
<td>This shouldn't be line-throughed.</td>
</tr>
</table>
</body>
</html>
The line-through is applied to the H2, so you have to take it off of the H2.
<html>
<head>
<style type="text/css">
h2 {text-decoration:line-through}
h2.alt { text-decoration: none; }
h2.alt span { border: 1px solid black; }
</style>
</head>
<body>
<h2>Line-through</h2>
<h2 class="alt"><span>This is heading 2, and shouldn't be line-throughed.</span></h2>
</body>
</html>
(Viewable here: http://jsbin.com/anopa/)
The child (span) cannot affect the style of the parent (h2), which is where the style is applied. You have to alter where the style was originally applied.
Edit: updated example
One way to fix this would be to change
tr {text-decoration:line-through}
to
tr td {text-decoration:line-through}
As a result, the line-through is on the individual table cell and not the whole row. This allows you to specify a different style on a single cell.
BTW, the issue doesn't seem to exist with the example code you've given on IE5.5+. In FF3.5, however, the example behaves as you've explained. I'm not sure which is the actual correct behavior.
Try This
<html>
<head>
<style type="text/css">
tr td {text-decoration:line-through;}
tr td.noline { text-decoration:none;}
</style>
</head>
<body>
<table>
<tr>
<td>this needs to be line-throughed</td>
<td class="noline">This shouldn't be line-throughed.</td>
</tr>
</table>
</body>
</html>
Notice that the style is "tr td" for both.
<td style="text-decoration: none>
It works, unless what you're trying to uncross is a link to a URL.
Then this phrase also defeats the link.
加载中,请稍侯......
精彩评论