css - 转换时背景颜色不填充表格单元格

Question

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

这是 fiddle :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: block;如果您选择该标签(或任何非 block 标签)，也可以添加到 span。

<!-- 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>