Complexity of a Simple Chart

by Jeff Cave

HTML

<table>
<caption>
  <h1>Status</h1>
  <p><time>@2023-02-02</time></p>
</caption>
<tbody>
 <tr class='expired'>
  <td>Gov SEC</td>
  <td>Out of Date</td>
 </tr>
 <tr class='refresh'>
  <td>Market NYSE</td>
  <td>1.3456 Hours</td>
 </tr>
 <tr>
  <td>Gov SEDAR</td>
  <td></td>
 </tr>
 <tr>
  <td>Market TSX</td>
  <td></td>
 </tr>
</tbody>
</table>

CSS

caption{
  border:1px solid black;
  border-bottom:none;
}
caption time{
  font-size:xx-small;
}
caption *{
  padding:0;
  margin:0;
}
table{
  border-collapse: collapse;
  border:1px solid black;
  border-top:none;
  padding:1em;
  font-size:xx-large;
  font-family:sans-serif;
}
tr{
  margin-left: 1em;
}
td{
  text-align:left;
  border:1px solid black;
  border-left:none;
  border-right:none;
  padding: 0.1em;
}

tr:hover{
  background-color:lightgrey;
}

tr > td:nth-of-type(2)::before{
    content:'✅';
    color:white;
    font-weight:bold;
    text-shadow: 0 0 0.25em black;
    background-color:steelblue;
    border:0.1em solid transparent;
    border-radius:1em;
    padding:0.1em;

}

tr.expired > td:nth-of-type(2)::before{
    content:'⏰';
    background-color:firebrick;
}

tr.refresh > td:nth-of-type(2)::before{
    content:'🔄';
    background-color:gold;
}