如果一个表的标题有背景，那么你可以只旋转标题中的文字吗？

Question

这是一个来自内部CMS的a simple table的JSFiddle：

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

我想将除了第一个元素以外的所有文本逆时针旋转45度，但不带背景。我也希望我能在不改变HTML的情况下做到这一点 - 只应用CSS。结果看起来应该类似于：

这可能吗？

Answer 1

这个怎么样？需要一些额外的包装元素。将您的背景图片添加到<th>。

＆＃13;

＆＃13;

.rotated-text {
    border-collapse:collapse;
}
.rotated-text td {
    text-align:right;
    border: 1px solid #ccc;
}

.rotated-text tbody tr > :first-child  {
    border-top:none;
    border-left:none;
    border-bottom: 1px solid #ccc;
}

.rotated-text th {
  height: 140px;
  white-space: nowrap;
  background-color: lightblue;
  background-image:url("https://upload.wikimedia.org/wikipedia/en/b/b1/Portrait_placeholder.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.rotated-text th > div {
  transform: translate(25px, 51px) rotate(315deg);
  width: 35px;
  position:relative;
  float:right;
  margin-right:5px;
}
.rotated-text th > div > span {
  border-bottom: 1px solid #ccc;
  padding: 5px 10px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是我的尝试...

不确定你想要得到的背景......这是背景吗？看起来有点难看。

边框是真实边框，但是在第一行tds

的伪元素上

th:nth-child(n+2) {
    border-color: transparent;
    transform: translateX(100%) rotate(-45deg);
    transform-origin: left bottom;
}
td {
    border: solid 1px black;
    position: relative;
}
.rotated-text {
    margin-top: 100px;
    border-collapse: collapse;
}
tr:first-child td:after {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: lightblue;
    bottom: 100%;
    z-index: -1;
    left: 0px;
}

tr:first-child td:nth-child(n+2):before {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    bottom: 100%;
    left: 0px;
    border-bottom: solid 1px black;
    transform: translateX(100%) rotate(-45deg);
    transform-origin: left bottom;
}

<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>x</td>
      <td>x</td>
      <td>x</td>
      <td>x</td>
    </tr>
        <tr>
      <td>days of sunshine</td>
      <td>x</td>
      <td>x</td>
      <td>x</td>
      <td>x</td>
    </tr>
  </tbody>
</table>

Answer 3

我最接近的是省去了桌子上的边框和边框间距。赋予边框所需的风格可能无法实现。我使用下划线模拟的th之间的界线。

.rotated-text {
  border-spacing: 0;
}
.rotated-text thead > tr {
  background-color: lightblue;
}
.rotated-text th {
  height: 9em;
  max-width: 3em;
  text-align: left;
  white-space: nowrap;
  transform: rotate(-45deg) translateX(-1.5em) translateY(2.5em);
  text-decoration: underline;
}
.rotated-text th:first-child {
  transform: rotate(-45deg);
}
.rotated-text td {
  text-align: center;
}

<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>x</td>
      <td>x</td>
      <td>x</td>
      <td>x</td>
    </tr>
  </tbody>
</table>

所以它并不完美，如果其他人可以改进这一点，我也会对这个解决方案感兴趣！

Answer 4

好吧，这是我能得到的最接近的。使用框阴影绘制th的行。

http://jsfiddle.net/vcbkport/

＆＃13;

＆＃13;

table {
    margin-top: 100px;
    border-collapse: collapse;
}
th {
    box-shadow: 0 4px 0 -2px grey;
    transform: rotate(-45deg);
    transform-origin: 0 0 0;
    text-align: left;
    text-indent: 10px;
    white-space: nowrap;
}
td {
    border: 1px solid grey;
}

＆＃13;

<table>
  <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>x</td>
      <td>x</td>
      <td>x</td>
      <td>x</td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;