CSS Line-Through not being removed_问答_开发者

开发者 https://www.devze.com 2022-12-12 01:07 出处：网络

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

相关专题：css

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}

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.