Geek Answers Handbook

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

Here's the JSFiddle, which is a simple table from the internal 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>

I would like to rotate the text in all but the first element 45 degrees counterclockwise, but without attracting the background. I also hope that I can do this without changing the HTML - only using CSS. The result should look something like this:

enter image description here

Is it possible?

+4
source share
4 answers

The closest I could come to was to abandon the borders and borders between the tables. By providing boundaries, the style you need can be unattainable. The lines between the thself are imitated by underlining.

.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>
Run codeHide result

, , !

+1

. -. <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>
Hide result
+2

...

, ... th? .

- , 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>
Hide result
+2

, , . , th.

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>
Hide result
+1

More articles:


All Articles