Linethrough / strikethrough a whole HTML table row

Moja odpowiedź (poniżej) powiedziała, że nie jest to możliwe. Myliłem się, jak zauważył @NicoleMorganErickson. Proszę zobaczyć jej odpowiedź (i upvote go!) za to, jak to zrobić. W skrócie, używasz pseudo-klasy :before, aby utworzyć element, który rysuje obramowanie Po środku komórki, nad treścią:

table           { border-collapse:collapse } /* Ensure no space between cells   */
tr.strikeout td { position:relative        } /* Setup a new coordinate system   */
tr.strikeout td:before {                     /* Create a new element that       */
  content: " ";                              /* …has no text content            */
  position: absolute;                        /* …is absolutely positioned       */
  left: 0; top: 50%; width: 100%;            /* …with the top across the middle */
  border-bottom: 1px solid #000;             /* …and with a border on the top   */
}    

(oryginalna odpowiedź)

Nie, nie jest możliwe użycie tylko CSS i znaczników tabeli semantycznej. Jak sugeruje @JMCCreative, możliwe jest wizualnie za pomocą dowolna liczba sposobów pozycjonowania linii nad rzędem.

Zamiast tego sugerowałbym użycie kombinacji color, background-color, font-style:italic i / lub text-decoration:line-through aby cały wiersz był oczywiście inny. (Osobiście zdecydowanie "zanik" tekst do koloru znacznie bliżej tła niż zwykły tekst i zrobić go kursywą.)

Najłatwiej byłoby użyć background-image na tr i jego komórkach potomnych (lub po prostu użyć przezroczystego background-color na tych komórkach).

Html:

<table>
    <thead>
        <tr>
            <th>Col One</th>
            <th>Col Two</th>
            <th>Col Three</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>First row, One-One</td>
            <td>First row, One-Two</td>
            <td>First row, One-Three</td>
        </tr>
        <tr class="empty">
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

Css:

table {
    empty-cells: show;
}
th, td {
    width: 6em;
    height: 2em;
    line-height: 2em;
    border: 1px solid #ccc;
}
tr.empty,
tr.empty td {
    background: transparent url('http://davidrhysthomas.co.uk/linked/strike.png') 0 50% repeat-x;
}

Js Fiddle demo

tr {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQIW2NkYGCQBAAAIwAbDJgTxgAAAABJRU5ErkJggg==');
    background-repeat: repeat-x;
    background-position: 50% 50%;
}

Użyłem http://www.patternify.com / aby wygenerować adres URL obrazu 1x1.

Podoba mi się odpowiedź Nicole Morgan Erickson, ale może wywołać skutki uboczne, jeśli zaimplementujesz jego rozwiązanie dosłownie. Dodałem kilka drobnych poprawek, aby utrzymać ten koszerny, poniżej... aby nie globalnie modyfikować każdej tabeli lub każdego td za pomocą tego css.

Chciałem również przycisk w wierszu, aby wykreślić wiersz, ale nie chciałem wykreślić kolumny przyciskiem, ze względu na widoczność. Chciałem tylko wykreślić resztę wiersza. Za to ja uczyniono to tak, aby każda kolumna, która chce być zdolna do pokazania wykreślenia, musiała zadeklarować takie, będąc również oznaczona klasą. w tej iteracji, musisz oznaczyć tabelę jako Strike-able, a także oznaczyć każdy td jako strike-able; ale zyskujesz bezpieczeństwo, nie wykonując żadnych tabel bez strike-able i zyskujesz kontrolę nad kolumnami do wykreślenia.

CSS:

table.strike-able {
    border-collapse: collapse;
}

table.strike-able tr td {
    position: relative;
    padding: 3px 2px;
}

table.strike-able tr th {
    position: relative;
    padding: 3px 2px;
}

table.strike-able tr.strikeout td.strike-able:before {
    content: " ";
    position: absolute;
    top: 50%;
    left: 0;
    border-bottom: 2px solid #d9534f;
    width: 100%;
}

Użycie:

<table class="strike-able" id="Medications" data-item-count="@Model.Medications.Count">
<tr>
    <th>
        Some Column
    </th>
    <th>
        Command Column
    </th>
</tr>
<tr class="strikeout">
    <td class="strike-able"></td>
    <td>Button that Toggles Striking Goes Here (active)</td>
</tr>
<tr>
    <td class="strike-able"></td>
    <td>Button that Toggles Striking Goes Here</td>
</tr>
</table>

Wreszcie, ponieważ używam tego z Bootstrap, a traktując usunięcia jako niebezpieczną rzecz do zrobienia, sformatowałem kolory trochę, aby pasowały do mojego użycia.

@NicoleMorganErickson, podoba mi się Twoja odpowiedź, ale nie mogłem uzyskać strikeout wpływać tylko na zastosowany wiersz. Ponadto, musiałem go stosować w wielu rzędach, więc zmodyfikowałem Twoje rozwiązanie w jedną klasę.

CSS:

tr.strikeout td:before {  
  content: " ";  
  position: absolute;  
  display: inline-block;  
  padding: 5px 10px;  
  left: 0;  
  border-bottom: 1px solid #111;  
  width: 100%;  
}

Http://codepen.io/anon/pen/AaFpu

Tak, możesz. W pierwszej komórce wiersza tworzysz div zawierający HR. Przesuń div po lewej stronie i określ jego szerokość jako % jego elementu zawierającego, w tym przypadku komórki tabeli. Będzie rozciągać się tak szeroko, jak chcesz przez komórki tabeli w tym wierszu, nawet poza szerokość tabeli, jeśli chcesz.

To działa dla mnie:

<style>
.strikeThrough {
height:3px;
color:#ff0000;
background-color:#ff0000;
}
.strikeThroughDiv {
float:left;
    width:920%;
    position:relative;
    top:18px;
border:none;
}
</style>
<table width="900" border="1" cellspacing="0" cellpadding="4">
   <tr  valign="bottom">
    <td>
    <div class="strikeThroughDiv"><hr  class="strikeThrough"/></div>
    One
    </td>
    <td>    
        <label for="one"></label>
        <input type="text" name="one" id="one" />
    </td>
    <td>
    <label for="list"></label>
      <select name="list" id="list">
        <option value="One">1</option>
        <option value="Two">2</option>
        <option value="Three" selected>3</option>
      </select>
    </td>
    <td>
      Four
    </td>
    <td>
      Five
    </td>
  </tr>
</table>

Aby kontrolować szerokość linii musisz określić szerokość komórki tabeli zawierającej HR. do stylizacji elementów HR mówią nie powinno być mniej niż 3px w wysokości.

Może absolutnie pozycjonujesz <hr /> element nad wierszem. W zależności od tego, jak statyczne lub dynamiczne musi to być, może to być bardzo szybki/łatwy sposób na przejście lub znacznie trudniejszy.