Rotated Table Column Headers… Now With Fewer Magic Numbers!

This article explains how to rotate table column headers using CSS, avoiding the need for trigonometric calculations. The author previously addressed this topic, but this approach simplifies the process by using geometry instead of complex math.

The core CSS, remarkably similar to a previous solution, is presented first for quick reference:

<th><div>Column Header 1</div></th>

table {
  border-collapse: collapse;
  --table-border-width: 1px;
}
th.rotate {
  white-space: nowrap;
  position: relative;
}
th.rotate > div {
  position: absolute;
  bottom: 0;
  left: 0;
  text-align: left;
  transform:
    translate(calc(100% - var(--table-border-width) / 2), var(--table-border-width))
    rotate(315deg);
  transform-origin: 0% calc(100% - var(--table-border-width));
  width: 100%;
}
th.rotate > div > span {
  position: absolute;
  bottom: 0;
  left: 0;
  border-bottom: var(--table-border-width) solid gray;
}
td {
  border-right: var(--table-border-width) solid gray;
  min-width: 30px;
  padding-top: 2px;
  padding-left: 5px;
  text-align: right;
}

The article then delves into a detailed explanation. Directly rotating <th> elements presents two major challenges: column width calculation based on header text length (undesirable for responsiveness) and the loss of the border during rotation. <p>The solution utilizes nested <code><div> and <code><span></span> elements within the <th>. The <code><div> acts as a container, enabling absolute positioning and preventing its content from affecting the column width. The <code><span></span> holds the text and its bottom border, ensuring proper alignment.

The key to avoiding complex calculations lies in strategically choosing the transform-origin. By setting transform-origin: 0% calc(100% - var(--table-border-width));, the rotation occurs around a point that aligns the borders seamlessly, eliminating the need for trigonometric adjustments. The translate() function precisely positions the rotated element.

Finally, the article suggests wrapping the table in a flexbox container to manage the increased height caused by the rotated headers. Example CSS for this container is provided. The article concludes by emphasizing the elegance and simplicity of this geometric approach to rotating table headers.