GeezerVison

This template simulates a table header cell split diagonally, a device often used to compactly label headers of rows and columns, as in this example:

To use it, create a header cell using ! followed by {{diagonal split header|NATURE-OF-ROW-HEADERS|NATURE-OF-COLUMN-HEADERS}}.

There are two variants of the template with different – and sadly incompatible – features:

• Template:Diagonal split header allows splitting the background color (see below)
• Template:Diagonal split header 2 produces a line with consistent thickness in very large table cells (see below)

As the effect is achieved by drawing a diagonal line across the cell, the two headers are still part of the same cell and can easily overrun the line. A remedy is to pad the headers with non-breaking spaces ( ), line breaks (<br />), and/or CSS (escape = signs as {{=}}), as in the example above. The template user is responsible for checking that it does not overrun on common Web browsers.

{| class="wikitable"
! {{diagonal split header|From|To}}
! Solid !! Liquid !! Gas
|-
! Solid
| Solid-solid transformation || Melting || Sublimation
|}

{| class="wikitable" style="margin:0 auto;text-align:center;"
! {{diagonal split header| Pair 1 | {{color|#900|Pair 2}} | cyan | yellow}}
! style="width:6em;background:yellow;"| {{color|#900|"Friend" (cooperate)}}
! style="width:6em;background:yellow;"| {{color|#900|"Foe" (defect)}}
|-
! style="width:6em;background:cyan "| "Friend" (cooperate)
| {{diagonal split header| 1 | {{color|#900|1}} | transparent}}
| {{diagonal split header| 0 | {{color|#900|2}} | pink | palegreen}}
|-
! style="width:6em;background:cyan "| "Foe" (defect)
| {{diagonal split header| 2 | {{color|#900|0}} | palegreen | pink}}
| {{diagonal split header| 0 | {{color|#900|0}} | pink}}
|}

{| class="wikitable sortable mw-collapsible" style="margin:0 auto;text-align:center;"
! colspan="2" rowspan="2" {{diagonal split header 2|City|''n''}}
! {{#expr:{{CURRENTYEAR}} - 1}}
! colspan="2"|{{CURRENTYEAR}} 
|-
! Dec !! Jan !! Feb
|-
! Roma !! Rome
| 8 || 1 || 6
|-
! Venezia !! Venice
| 3 || 5 || 7
|-
! Firenze !! Florence
| 4 || 9 || 2
|}

• It is possible to create a version without the line-overrun per Krautzberger. This one works by drawing a line and using a 2x2 CSS grid with the bottom-left and top-right corners.

  See caniuse for support of the required css-grid feature; compare with (unprefixed) css-gradients underlying the current implementation.

• Neither implementation supports laying out text along the diagonal, as the browser is unaware of the triangular shape. CSS-shapes may be a solution, but the easier shape-inside approach is yet to be standardized.