Having difficulty turning the header cells (th) with background-color applied? It seems like the color bar may be too small, the cell width too large, or the background isn't being affected properly.
Is there a way to create a narrow cell with long text and rotate it while also changing the background-color?
th {
white-space: nowrap;
/* height: 180px;*/
vertical-align: middle;
text-align: left;
width: 3em;
max-width: 2em;
/* min-width: 2em;*/
transform-origin: bottom left;
transform: translateX(20px) rotate(-45deg);
background-color: yellow;
}<HTML>
<body>
<div style='height:110px;'></div>
<TABLE CELLPADDING=5 CELLSPACING=0>
<TR>
<TH>21st September </TH>
<TH>22nd September </TH>
<TH>23rd September </TH>
</TR>
<TR>
<TD >
x
</TD>
<TD>x</TD>
<TD>x</TD>
</TR>
<TR>
<TD>
x
</TD>
<TD>x</TD>
<TD>x</TD>
</TR>
<TR>
<TD >
x
</TD>
<TD>x</TD>
<TD>x</TD>
</TR>
</TABLE>
</body>