isthisblog | leaning table headers

By isthisnagee

hello@isthisnagee.com

published

The problem

In situations where a table needs to show a lot of data at once, and the data is such that each item doesn't take up a lot of space, the table headers can get in the way and force a lot of width:

Visual representation of how vertical headers take up less horizontal space than regular horizontal headers

Making the columns vertical helps, but I do think it's less readable, so putting them at an angle can help with that. A lot of the blog posts I saw that go into implementing this deal with a lot of magic numbers, so this is an attempt to stray away from that.

Demo

Implementation:

Here's some MDN docs on things I'll be referencing these as I go.

So the idea behind this is that we have to first skew the box, then we have to rotate the text to align with how the box is skewed.

hello world


:root {

  --angle: 45deg;

  --width: 100px;

  --height: 100px;

}



.header {

  display: flex;

  align-items: center;

  justify-content: center;



  width: var(--width);

  height: var(--height);



  border: 1px solid pink;

}



.skew {

  transform-origin: bottom left;

  transform: skew(calc(-1 * var(--angle)));

}

This will skew the box in the x axis, giving us something that looks like this:

If we throw some text in here, it will also get also get skewed:


<div class="header skew">hello world</div>

hello world

This is something we don't want. Luckily we can undo the skew on the text:


.unskew {

  display: inline-block;

  transform: skew(var(--angle));

}


<div class="header skew">

  <span class="unskew">hello world</span>

</div>

hello world

We also need to rotate the text to align with the skew of the header


.rotate {

  display: inline-block;

  transform: rotate(calc(-90deg + var(--angle)));

}


<div class="header skew">

  <span class="rotate">hello world</span>

</div>

hello world

So to make the unskewed and rotate, we need to combine the tranformation:


.unskew-and-rotate {

  display: inline-block;

  transform: 

    skew(var(--angle))

    rotate(calc(-90deg + var(--angle)));

}


<div class="header skew">

  <span class="unskew-and-rotate">hello world</span>

</div>

hello world