1

I've got a table where I'm rotating the th This is the code

table.results-table span {
  display:block;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  font-weight:300;
}
<table class="results-table">
  <tr>
    <th></th>
    <th><span>Test1</span></th>
    <th><span>Test1</span></th>
    <th><span>Test1</span></th>
    <th><span>Test1</span></th>
    <th><span>Test1</span></th>
    <th><span>Test1</span></th>
    <th><span>Test1</span></th>
  </tr>
  <tr>
    <td>Employee 1</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
  </tr>
  <tr>
    <td>Employee 1</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
  </tr>
</table>

This works fine, however the th is the width as if the text wasn't rotated which causes it to break on smaller screens. Is there any way to set the width so it's only as wide as the rotated text?

Jonathan
  • 685
  • 1
  • 10
  • 30
MariaL
  • 1,112
  • 2
  • 16
  • 41

2 Answers2

1

Another way to get the wanted output could be to use the writing-mode property : 

table.results-table span {
  writing-mode: sideways-lr;
}


table.results-table span {
  writing-mode: sideways-lr;
}
<table class="results-table">
  <tr>
    <th></th>
    <th><span>Test1</span></th>
    <th><span>Test1</span></th>
    <th><span>Test1</span></th>
    <th><span>Test1</span></th>
    <th><span>Test1</span></th>
    <th><span>Test1</span></th>
    <th><span>Test1</span></th>
  </tr>
  <tr>
    <td>Employee 1</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
  </tr>
  <tr>
    <td>Employee 1</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
  </tr>
</table>
Vincent G
  • 8,547
  • 1
  • 18
  • 36
0

Why don't you apply rotate transform to <th> instead of <span>

Stack Snippet

table.results-table th {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  font-weight:300;
}
th,td{padding:10px;text-align:center;}
body{font:13px Verdana;}
<table class="results-table">
  <tr>
    <th></th>
    <th><span>Test1</span></th>
    <th><span>Test1</span></th>
    <th><span>Test1</span></th>
    <th><span>Test1</span></th>
    <th><span>Test1</span></th>
    <th><span>Test1</span></th>
    <th><span>Test1</span></th>
  </tr>
  <tr>
    <td>Employee 1</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
  </tr>
  <tr>
    <td>Employee 1</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
    <td>6</td>
  </tr>
</table>
Bhuwan
  • 16,525
  • 5
  • 34
  • 57