这是一个来自内部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。结果看起来应该类似于:
这可能吗?
答案 0 :(得分:2)
这个怎么样?需要一些额外的包装元素。将您的背景图片添加到<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;
}
&#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;
答案 1 :(得分: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>
答案 2 :(得分:1)
我最接近的是省去了桌子上的边框和边框间距。赋予边框所需的风格可能无法实现。我使用下划线模拟的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>
所以它并不完美,如果其他人可以改进这一点,我也会对这个解决方案感兴趣!
答案 3 :(得分:1)
好吧,这是我能得到的最接近的。使用框阴影绘制th的行。
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;