* { margin: 0; padding: 0; box-sizing: border-box; }
:root { font: 16px system-ui; color: white; }

body {
  width: min(800px, 100%);
  margin: 30px auto;
  background: #222;
}

table {
  border-collapse: collapse;

  & tr:nth-of-type(2n) { background: #333; }
  & tr:nth-of-type(2n+1) { background: #444; }
  
  & td, th { 
    padding: 5px 10px; 
    &:nth-of-type(1) { text-align: center; }
    &:nth-of-type(2) { text-align: left; }
  }
  & th:nth-child(1) {
    cursor: pointer;
    &::before { content: '🎲 '; }
  }
  & th:nth-child(2) {
    cursor: pointer;
    &::after { content: '▲'; margin-left: 10px; float: right; }
    .open &::after { content: '▼'; }
  }

  &:not(.open) tr:nth-child(n+2) { display: none; }
}