给定一个 table 的 headers 有背景，你能 CSS-rotate 只有 headers 中的文字吗？

Question

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

<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

我最接近的是在 table 中取消边框和边框间距。为边框提供您需要的样式可能无法实现。我用下划线模拟的 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 2

好的，这是我能得到的最接近的。用方框阴影画线.

http://jsfiddle.net/vcbkport/

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

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

Answer 3

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

.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;
}

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

Answer 4

这是我的尝试...

不确定您要获取的背景...是th 的背景吗？有点难看。

borders是真正的borders，但是在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>

给定一个 table 的 headers 有背景，你能 CSS-rotate 只有 headers 中的文字吗？

Given a table whose headers have backgrounds, can you CSS-rotate only the text in the headers?

css

html-table