Linethrough/strikethrough a whole HTML table row

by

Oh yes, yes it is!

CSS:

table {
    border-collapse: collapse;
}

td {
    position: relative;
    padding: 5px 10px;
}

tr.strikeout td:before {
    content: " ";
    position: absolute;
    top: 50%;
    left: 0;
    border-bottom: 1px solid #111;
    width: 100%;
}

HTML:

<table>
    <tr>
        <td>Stuff</td>
        <td>Stuff</td>
        <td>Stuff</td>
    </tr>
    <tr class="strikeout">
        <td>Stuff</td>
        <td>Stuff</td>
        <td>Stuff</td>
    </tr>
    <tr>
        <td>Stuff</td>
        <td>Stuff</td>
        <td>Stuff</td>
    </tr>
</table>

http://codepen.io/nericksx/pen/CKjbe

More Related Contents:

  1. Set cellpadding and cellspacing in CSS?
  2. Word-wrap in an HTML table
  3. How to deal with page breaks when printing a large HTML table
  4. HTML/CSS: Making two floating divs the same height
  5. CSS3’s border-radius property and border-collapse:collapse don’t mix. How can I use border-radius to create a collapsed table with rounded corners?
  6. Make a div fill the height of the remaining screen space
  7. Why doesn’t table > tr > td work when using the child selector?
  8. Table with fixed header and fixed column on pure css
  9. Fixed header table with horizontal scrollbar and vertical scrollbar on
  10. Bootstrap 4 row fill remaining height
  11. How can I set the max-width of a table cell using percentages?
  12. Add a horizontal scrollbar to an HTML table
  13. Wrap text in tag
  14. CSS table-cell equal width
  15. Rounded table corners CSS only
  16. How to fix height of TR?
  17. using text-align center in colgroup
  18. Giving a border to an HTML table row,
  19. overflow:scroll; in
  20. How can I apply a border only inside a table?
  21. How to strike through obliquely with css
  22. Equivalent to float in Outlook
  23. Table overflowing outside of div
  24. The border-radius property and border-collapse:collapse don’t mix. How can I use border-radius to create a collapsed table with rounded corners?
  25. Removing unwanted table cell borders with CSS
  26. Should Tables be avoided in HTML at any cost?
  27. CSS: display:block; vs display:table;
  28. Splitting a table cell into two columns in HTML
  29. Table vertical header?
  30. How to make a table with equal column widths in CSS?

Leave a Comment