<table id="zen">
<caption>AMD Zen Processors</caption>
<thead>
<tr>
<th>Name
<th>Speed
<th>Cores
<th>Threads
<th>Price
<tbody>
<tr>
<td>SR7
<td>3.5Ghz
<td>8
<td>16
<td>$499
<tr>
<td>SR7
<td>3.2GHz
<td>8
<td>16
<td>$349
<tr>
<td>SR5
<td>3GHz
<td>6
<td>12
<td>$250
</table>@keyframes hide {
to {
font-size: 0;
padding: 0;
}
}
@font-face {
src: url(https://thenewcode.com/assets/fonts/libertad.woff);
font-family: Libertad;
}
* {
box-sizing: border-box;
}
body {
font-family: Libertad, sans-serif;
}
table {
border-collapse: collapse;
margin: 0 auto;
font-size: 1.2rem;
}
table caption {
font-size: 2rem;
margin-bottom: 1rem;
}
tr td, tr th { padding: .4rem; }
caption {
font-size: 1.4rem;
font-weight: bolder;
}
tr td:nth-of-type(3), tr td:nth-of-type(4) {
text-align: center;
}
thead {
border-bottom: 2px solid #333;
}
tbody tr {
border-bottom: 1px solid #ddd;
}
tr.hidden td {
animation: hide 1s 1s forwards;
}
tr.hidden {
opacity: 0;
border-bottom: none;
}
tbody tr button {
width: 36px;
height: 36px;
margin-left: 1rem;
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/trashcan.svg);
border: none;
background-position: center 4px;
background-repeat: no-repeat;
background-size: 25px 25px;
opacity: .6;
transition: .5s;
}
tbody tr button:hover {
opacity: .9;
cursor: pointer;
}let procRows = zen.querySelectorAll("tbody tr");
for (let i = 0; i < procRows.length; i++) {
procRows[i].innerHTML += '<td><button title="Remove"></td>';
}
zen.querySelector("tbody").addEventListener("click", function(e) {
if (e.target.nodeName == "BUTTON") {
let cell = e.target.parentNode;
cell.parentNode.classList.add("hidden");
e.target.remove();
}
})
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.