给定一个标题有背景的表，CSS能否仅旋转标题中的文本？

下面是一个JSFIDLE，它从内部CMS获得：

<table class="rotated-text">
  <thead>
    <tr>
      <th>property</th>
      <th>San Francisco, CA</th>
      <th>New York, NY</th>
      <th>Washington, DC</th>
      <th>Charlottesville, VA</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>days of sunshine</td>
      <td>260</td>
      <td>200</td>
      <td>210</td>
      <td>220</td>
    </tr>
  </tbody>
</table>

财产
CA旧金山
纽约州纽约市
华盛顿特区
弗吉尼亚州夏洛茨维尔
晴天
260
200
210
220

除了第一个元素，我想逆时针旋转文本45度，但不带背景。我也希望我可以在不改变HTML的情况下做到这一点——只应用CSS。结果应该与此类似：

---

有可能吗？

我能做的最接近的事情就是取消表格中的边框和边框间距。为边框提供所需的样式可能无法实现。我用下划线模拟了

th

s之间的行

。旋转文本{
边界间距：0；
}
.旋转文本thead>tr{
背景颜色：浅蓝色；
}
.旋转文本th{
高度：9公分；
最大宽度：3em；
文本对齐：左对齐；
空白：nowrap；
变换：旋转（-45度）translateX（-1.5em）translateY（2.5em）；
文字装饰：下划线；
}
.旋转文本th：第一个孩子{
变换：旋转（-45度）；
}
.旋转文本td{
文本对齐：居中；
}

财产
CA旧金山
纽约州纽约市
华盛顿特区
弗吉尼亚州夏洛茨维尔
晴天
x
x
x
x

好的，这是我能找到的最接近的了。使用框阴影绘制第条线

表格{
边缘顶部：100px；
边界塌陷：塌陷；
}
th{
盒影：0.4px 0-2px灰色；
变换：旋转（-45度）；
变换原点：0；
文本对齐：左对齐；
文本缩进：10px；
空白：nowrap；
}
运输署{
边框：1px纯灰；
}

财产
CA旧金山
纽约州纽约市
华盛顿特区
弗吉尼亚州夏洛茨维尔
晴天
x
x
x
x

这个怎么样。需要一些额外的包装器元素。将背景图像添加到

中

。旋转文本{
边界塌陷：塌陷；
}
.旋转文本td{
文本对齐：右对齐；
边框：1px实心#ccc；
}
.旋转文本tbody tr>：第一个孩子{
边界顶部：无；
左边界：无；
边框底部：1px实心#ccc；
}
.旋转文本th{
高度：140像素；
空白：nowrap；
背景颜色：浅蓝色；
背景图像：url（“https://upload.wikimedia.org/wikipedia/en/b/b1/Portrait_placeholder.png");
背景大小：100%100%；
背景重复：无重复；
}
.旋转文本th>div{
变换：平移（25像素，51像素）旋转（315度）；
宽度：35px；
位置：相对位置；
浮动：对；
右边距：5px；
}
.旋转文本th>div>span{
边框底部：1px实心#ccc；
填充物：5px10px；
}

财产
CA旧金山
纽约州纽约市
华盛顿特区
弗吉尼亚州夏洛茨维尔
晴天
x
x
x
x

我的尝试开始了

不确定你想得到的背景。。。这是第十届奥运会的背景吗？看起来有点难看

边界是真实边界，但位于tds第一行的伪元素上

th:n子代（n+2）{
边框颜色：透明；
变换：translateX（100%）旋转（-45度）；
变换原点：左下角；
}
运输署{
边框：实心1px黑色；
位置：相对位置；
}
.旋转文本{
边缘顶部：100px；
边界塌陷：塌陷；
}
tr：第一个孩子td：之后{
内容：“；
位置：绝对位置；
身高：100%；
宽度：100%；
背景颜色：浅蓝色；
底部：100%；
z指数：-1；
左：0px；
}
tr:第一个孩子td:第n个孩子（n+2）：之前{
内容：“；
位置：绝对位置；
身高：100%；
宽度：100%；
底部：100%；
左：0px；
边框底部：实心1px黑色；
变换：translateX（100%）旋转（-45度）；
变换原点：左下角；
}

财产
CA旧金山
纽约州纽约市
华盛顿特区
弗吉尼亚州夏洛茨维尔
晴天
x
x
x
x
晴天
x
x
x
x

我很困惑。在css中，只要旋转

th

元素，就可以在不更改html的情况下执行此操作，但由于某些原因，您指定不希望旋转

th

元素上的背景。在您的图像中，似乎没有未旋转的背景。背景必须不旋转吗？你是说像这样？它的背景在tr而不是ths上。@RaphaelRafatpanah如果你把背景应用到ths上，我的小提琴看起来确实非常，嗯，不专业。标题+描述+图像不太匹配，但如果其中任何一个更接近你的需要，请看下面两个到目前为止发布的答案。聪明！我认为你的方法很有意思。将@vals的

属性应用到我自己的解决方案之前，将使您非常接近您真正想要的！