Linethrough/Strikethrough a Whole HTML Table Row

Linethrough/strikethrough a whole HTML table row

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

How to clear line-through for an element in a table row?

I was playing with it in jsFiddle. Seems like the only way to do it is to wrap the other content that you want the line-through on in another element, like a span.

Update: code from jsFiddle, as requested:

<table>
  <tr class="table-item">
    <td><span>Text</span></td>
    <td><a href="#">Delete item</a></td>
  </tr>
</table>

CSS:

.table-item td span {
  text-decoration: line-through;
}

Strikeout an entire table row

Probably the easiest way to do this, if all the rows are the same height, is to apply a background image to it that just has a big line through the center, the same color as the test.

how to make a strikethrough on a table row withot messing the borders

Amend CSS part

#table td {
    position: relative;
}

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

const animals = [{
    "animalId": "1",
    "animalName": "elephent",
    "cageNum": "231",
    "legsNum": "4",
    "CandidatesForDeletion": false
    },
    {
        "animalId": "2",
        "animalName": "tiger",
        "cageNum": "324",
        "legsNum": "56.00",
        "CandidatesForDeletion": false
    },
    {
        "animalId": "3",
        "animalName": "wolf",
        "cageNum": "414",
        "legsNum": "210.40",
        "CandidatesForDeletion": false
    }
]

let tableBody = '<table id="table"><tr class="tr tr1"><td class="td1">animal Id</td><td class="td1">animal name</td><td class="td1">cage Number</td><td class="td1">legs Number</td><td class="td1">delete</td></tr>';

animals.forEach(function (d) {
    tableBody += `<tr class="tr tr2">
<td class="td2">${d.animalId}</td>
<td class="td2">${d.animalName}</td>
<td class="td2">${d.cageNum}</td>
<td class = "td2">${d.legsNum}</td>
<td class="td2 trash_button">click for strikethrough</td>
</tr>`;
});

$(document).ready(function () {
    $(document).on('click', '.trash_button', function () {
        $(this).closest('tr').toggleClass('strikethrough');
    });
});

function CreateTableFromJSON() {
    $('#showData').html(tableBody);
}

#table {
    overflow-x: auto;
    overflow-y: auto;
    position: absolute;
    left: 5%;
    top: 30%;
    width: 90%;
    align-content: center;
    font-size:12px;
    border-collapse:collapse;
    border: 2px solid black;

}

.tr {

    font-weight:bold;
    border: 2px solid black;
    height: 17%;
}

.tr1 {
    background:#16A1E7;
    height: 80px;
}

.tr2 {
    background: #ffffff;
    transition: 0.4s;
    height: 80px;

}

.tr2:hover {
    background-color: cyan;
    transition: 0.4s;
}

.td1 {
    justify-items: center;
    align-items: center;
    text-align: center;
    color:white;
    border: 2px solid black;
    height: 17%;
}

.td2 {
    justify-items: center;
    align-items: center;
    text-align: center;
    color:black;
    border: 2px solid black;
    height: 17%;
}

#table td {
    position: relative;
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button tabindex="1" onclick="CreateTableFromJSON()" value="Create Table From JSON" style="border: 1px solid black">animals</button><p id="showData"></p>

Strikethrough Table and/or DIV

You can use jQuery, to find check box parents parent and add a class to it when status of checkbox changed

if ( this.checked) {
  $(this).parent().parent().addClass("strikeout");
} else {
 $(this).parent().parent().removeClass("strikeout");
}

Example

Is it possible to cross out cells in an HTML table?

Well, this is a bit hacky, but it works.
Utilize linear-gradient

Using background-image for the current cell, strike through under content

table{  min-width: 100%;}
table td{  border: 1px solid silver;  position: relative;}
table td.crossed{   background-image: linear-gradient(to bottom right,  transparent calc(50% - 1px), red, transparent calc(50% + 1px)); }

<table>  <tbody>    <tr>      <td>Content</td>      <td>Content</td>      <td>Content</td>    </tr>     <tr>      <td>Content</td>      <td class="crossed">Content</td>      <td>Content</td>    </tr>  </tbody></table>

How to strikethrough empty div

You can do something similar using border-bottom property as in the linked question. Like so:

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

You can change the color just by changing the value of the border-bottom color value. Here is the Jsfiddle for it.

---

Related Topics