Search code examples
csshtml-tablerotationbackground-color

HTMl table: turning cell background-colour with max-width does not work

Turning the header cells (th) with background-color does not work. The color bar is too small or the cell is too wide or the background is not turned.

How is it possible to create a narrow cell with long text and turn it including 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>

Solution

  • You could use span in th:

    th {
   white-space: nowrap;
   vertical-align: middle;
   text-align: left;       
   width: 3em;
   max-width: 2em; 
 }
 th span {
     display: inline-block;
     white-space: nowrap;
     transform-origin: bottom left;
     transform: translateX(20px) rotate(-45deg);
     background-color: yellow;
 }
    <div style='height:110px;'></div>

<TABLE CELLPADDING=5 CELLSPACING=0>
  <TR>
   
    <TH><span>21st September</span></TH>
    <TH><span>22nd September</span></TH>
    <TH><span>23rd September</span></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>