table.picospa-chart.bar {
  table-layout: unset;
  border-spacing: 0; /* remove the default inner border a table seems to have */
  position: relative;

  tbody {
    /* Position the <tr>s inside this body. The overflow:hidden needs to be set on the <tr> explicitly. */
    display: flex;
    flex-direction: column;

    tr {
      display: flex;
      overflow: hidden;
      height: 100%; /* Ensure the content of all TRs covers the whole node's height. */
      
      border-block-end: var(--picochart-grid-line, none);

      th {
        display: none;
      }

      td {
        background: linear-gradient(to right, var(--picochart-color, black) var(--percent), transparent var(--percent));

        width: 100%;
      }
    }
  }
  

  tfoot {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    tr {
      display: flex;
    }
    
    th {
      color: transparent; /* Don't show the content of the th, use this to let the border be visible. */
    }  
    
    /* 
     * the horizontal y-axis grid lines 
     */
    tr:not(:last-of-type, :first-of-type) td {
      /* Make the <td> only 1px wide, so its border is in the center. */
      width: 1px;
      display: flex;
      justify-content: center;
    }

    th {
      position: absolute;
      top: 0;
      height: 100%;
    }
    tr:not(:last-of-type) th {
      border-inline-start: var(--picochart-grid-line, none);
    }
    tr:last-of-type th {
      border-inline-end: var(--picochart-grid-line, none);
      right: 0;
    }
    
    td {
      position: absolute; /* Make the labels on the x-axis not occupy any space, so the content does not determine their DOM node's width. */
    }
    tr:last-of-type td {
      right: 0; /* The right-most one is right aligned. */
    }
  }
}