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

here's jsfiddle has a simple table 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'd rotate text in first element 45 degrees counterclockwise, without bringing along background. i'm hoping can without changing html -- applying css. result should similar this:

is possible?

the closest come dispense borders , border-spacing in table. giving borders style need may unattainable. lines between ths simulated underline.

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

so it's not perfect, , if other people improve on this, i'd interested in solution too!