代码之家 › 专栏 › 技术社区 › Max

转换时背景色不会填充表格单元格

css

Max · 技术社区 · 6 年前

当我转换表格时,背景色并不能完全填充表格单元格。请问我怎样才能解决这个问题?谢谢。

这是小提琴: 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>

2 回复 | 直到 6 年前

Juan Elfers 6 年前

我强烈建议你不要这样做。取而代之的是,删除它们并为每行(显然)创建一行。

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

Edit:另一个解决方案,如果您真的想/需要这样做,就是将单元格的内容放在另一个标记中,例如跨度

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

cmprogram 6 年前

您已经在表中旋转了td元素,而不是表本身,这是我假设您要做的。

#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;

}