Redacted Table Column

by Pete Fecteau

HTML

<table>
  <tbody>
  <tr>
    <th>ID</th>
    <th class="redacted">Customer Name</th>
    <th>Vehicle</th>
  </tr>
  <tr>
    <td>002</td>
    <td class="redacted">REDACTED</td>
    <td>Ranger</td>
  </tr>
  <tr>
    <td>003</td>
    <td class="redacted">REDACTED</td>
    <td>f-150</td>
  </tr>
  <tr>
    <td>004</td>
    <td class="redacted">REDACTED</td>
    <td>f-150</td>
  </tr>
  <tr>
    <td>004</td>
    <td class="redacted">REDACTED</td>
    <td>Focus</td>
  </tr>
  <tr>
    <td>005</td>
    <td class="redacted">REDACTED</td>
    <td>Super Duty</td>
  </tr>
  <tr>
    <td>006</td>
    <td class="redacted">REDACTED</td>
    <td>f-150</td>
  </tr>
  <tr>
    <td>007</td>
    <td class="redacted">REDACTED</td>
    <td>Focus</td>
  </tr>
  <tr>
    <td>008</td>
    <td class="redacted">REDACTED</td>
    <td>Focus</td>
  </tr>
  <tr>
    <td>009</td>
    <td class="redacted">REDACTED</td>
    <td>Ranger</td>
  </tr>
  <tr>
    <td>010</td>
    <td class="redacted">REDACTED</td>
    <td>Mustang</td>
  </tr>
  </tbody>
</table>

CSS

table tr td,
table tr th{
  padding: 10px;
  text-align: left;
}
th.redacted {
  text-decoration: line-through;
}
td.redacted {
  filter: blur(5px);
}