Best IT Recipes

CSS linear line not removed

I have code that wraps the end-to-end path to TR for deleted rows, but that means my "Actions" column (which only has) suffers. This is due to the fact that there are separate gaps between the buttons, which also end with a line.

After you peek into W3Schools, it scares me why this example does not 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 can I clear the end-to-end path of children?

EDIT I updated my example - the problem is that I do not want to erase the style from the parent element, just one child element.

+7
html css
Nov 18 '09 at 19:49
source share
6 answers

You do not need to use important or built-in styles for this. Try

 h2 {text-decoration:line-through;} h2 span {text-decoration: none; border: 1px solid black;}

EDIT

In this case, with tr, since you attached the text design to it, you need to take the decoration text from the same tr element, not td. Otherwise, do:

 tr td { text-decoration: whatever }

and then if necessary

 <td style="text-decoration: none;"></td>
0
Nov 18 '09 at 19:51
source share

Some time ago there was a question , and according to this answer you cannot do what you are trying to accomplish.

EDIT: given your example, why not just apply linear transition 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>
+1
Nov 18 '09 at 19:56
source share

The linear passage applies to H2, so you need to remove it from 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>

(can be viewed here: http://jsbin.com/anopa/ )

The child (span) cannot influence the style of the parent (h2) in which the style is applied. You must change where the style was originally applied.

Edit: updated example

0
Nov 18 '09 at 19:57
source share

One way to fix this is to change

 tr {text-decoration:line-through}

to

 tr td {text-decoration:line-through}

As a result, the line passes through a separate cell of the table, and not the entire row. This allows you to specify a different style in one cell.

By the way, the problem does not seem to exist with the sample code that you pointed to IE5.5 +. In FF3.5, however, the example behaves the way you explained. I am not sure if this is the correct behavior.

0
Nov 18 '09 at 20:04
source share

try it

 <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>

Note that the style is "tr td" for both.

0
Nov 18 '09 at 20:16
source share
 <td style="text-decoration: none>

This works, unless you are trying to use a mismatch, this is a link to the url.

Then this phrase also defeats the link.

-one
Oct 23 '15 at 21:16
source share


More articles:


All Articles