<div id=yourdiv>
  <h4>A slanty table</h4>
        <th><div><span>Shrt Hdr</span></div></th>
        <th><div><span>Med Header</span></div></th>
        <th><div><span>A really long header</span></div></th>
        <th><div><span>What is this a javascript variable</span></div></th>

        <td>Not that small</td>
        <td>Just regular</td>
#yourdiv {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  max-width: 50vw;
  margin-top: 50px;
  /* make sure this is bigger than your largest
     expected header name slanted at 45 degrees
     i.e. sqrt(2) * length of text */
  flex-basis: 140px;
  border-collapse: collapse;
  --table-border-width: 1px;
th {
  white-space: nowrap;
  position: relative;
th > div {
  /* place div at bottom left of the th parent */
  position: absolute;
  bottom: 0;
  left: 0;
  /* Make sure short setting names still meet the corner of the parent otherwise you'll get a gap */
  text-align: left;
  /* Move the top left corner of the span bottom-border to line up with the top left corner of the td border-right border so that the border corners are matched */
  /* Rotate -45 degrees about matched border corners */
    translate(calc(100% - var(--table-border-width) / 2), var(--table-border-width))
  transform-origin: 0% calc(100% - var(--table-border-width));
  width: 100%;
th > div > span {
  /* make sure the bottom of the span is matched up with the bottom of the parent div */
  position: absolute;
  bottom: 0;
  left: 0;
  border-bottom: var(--table-border-width) solid gray;
td {
    border-right: var(--table-border-width) solid gray;
    /* make sure this is at least as wide as sqrt(2) * height of your tallest letter or the headers will overlap each other */
    min-width: 30px;
    text-align: right;
    padding-top: 2px;
    padding-left: 5px;
/*TADA! a response slanty border header table*/
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.