HTMl table：用 max-width 转换单元格 background-colour 不起作用

Question

用 background-color 转动第 header 个单元格不起作用。彩条太小或单元格太宽或背景未转

如何创建一个带有长文本的窄单元格并将其包含 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>

Answer 1

您可以在 th 中使用 span:

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>

HTMl table：用 max-width 转换单元格 background-colour 不起作用

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

css

html-table

rotation

background-color