Question

当我转换表格时，背景颜色没有完全填满表格单元格。请问如何解决这个问题？谢谢。

这是小提琴：https://jsfiddle.net/c5xw6n93/这个简单的表格只是为了显示我在这里遇到的问题。

#style {
  border: 2px solid #CCC;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  border-collapse: collapse;
  transform: rotate(270deg);
  margin-top: 140px;
  width: 80px;
  position: relative;
}

#style td {
  padding: 3px;
  margin: 3px;
  border: 2px solid #ccc;
  text-align: center;
  height: 22px;
  width: 22px;
  transform: rotate(90deg);
}

.yellow {
  background-color: yellow;
}

<table id="style">
  <tr>
    <td class="yellow">a</td>
    <td>b</td>
    <td>c</td>
    <td>d</td>
    <td>e</td>
    <td class="yellow">f</td>
    <td>g</td>
  </tr>
</table>

Answer 1

我非常不鼓励您进行这种轮换。取而代之的是，删除它们并为每行（显然）每行制作1行。

<table id="style">
  <tr>
    <td class="yellow">a</td>
  </tr>
  <tr>
    <td>b</td>
  </tr>
  <!-- ... -->
</table>

编辑：如果您真的想要/需要这样做，另一种解决方案是将单元格的内容放在另一个标签内，例如 span 。如果旋转跨度，则单元格的背景将正常。您必须分配一个display：块；如果您选择了该标签（或任何非阻塞标签），也可以选择跨度。

<!-- Rotate the spans, not the tds -->
<table id="style">
  <tr>
    <td class="yellow"><span>a</span></td>
  </tr>
  <tr>
    <td><span>a</span></td>
  </tr>
  <!-- ... -->
</table>

Answer 2

您已经在表中旋转了td元素，而不是表本身，这是我假设您要尝试的操作。

用以下内容替换CSS代码：

#style {
    border: 2px solid #CCC; font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    border-collapse:collapse; 
    transform: rotate(270deg);
    margin-top: 140px;
    width: 80px;
    position: relative;
 transform: rotate(-90deg);
} 

#style td {
    padding: 3px; 
    margin: 3px;
    border: 2px solid #ccc;
  text-align: center;
  height:22px;
    width: 22px;  
  /* transform: rotate(90deg); */



}

.yellow  {
 background-color:yellow;

}

旋转元素而不是适当地设置其样式可能会变得混乱，因此请谨慎操作。

**编辑** 根据问题发布者的问题，文本将与tds一起旋转。

HTML

<table id="style">
<tr><td>g</td></tr>
<tr><td class="yellow">f</td></tr>
<tr><td>e</td></tr>
<tr><td>d</td></tr>
<tr><td>c</td></tr>
<tr><td>b</td>
<tr><td class="yellow">a</td></tr>
</table>

CSS

#style {
    border: 2px solid #CCC; font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    border-collapse:collapse; 
    transform: rotate(270deg);
    margin-top: 140px;
    width: 80px;
    position: relative;
    transform: rotate(-180deg);
} 

#style td {
    padding: 3px; 
    margin: 3px;
    border: 2px solid #ccc;
  text-align: center;
  height:22px;
    width: 22px;  
  transform: rotate(-180deg);  


}

.yellow  {
 background-color:yellow;

}

转换后，背景色未填充表格单元格

2 个答案: