CSS - Vertical Text in Table Header

CSS - Vertical Text in Table Header.markdown

CSS - Vertical Text in Table Header

Question answer on Stack Overflow:

http://stackoverflow.com/questions/12978156/vertically-text-in-internet-explorer-8-9-inside-a-table/13289233#13289233

A Pen by Chris Spittles on CodePen.

License.

index.html

<div class="intro">
  <h1>Cross Browser Vertical Text in Table Header</h1>
  
  <p>This pen demonstrates how to use vertical text in a table header and answers the following question on Stack Overflow:

<a href="http://stackoverflow.com/questions/12978156/vertically-text-in-internet-explorer-8-9-inside-a-table/13289233#13289233">Vertically text in Internet Explorer 8/9 inside a table</a>.</p>
  
</div>

<table>
<thead>
    <tr>
        <th></th>
        <th>Col 1</th>
        <th>Col 2</th>
    </tr>
</thead>
<tbody>
    <tr>
        <th>Row 1</th>
        <td>12</td>
        <td>14</td>
    </tr>
    <tr>
        <th>Row 2</th>
        <td>13</td>
        <td>11</td>
    </tr>
</tbody>
</table>

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

table {
  font-family: sans-serif;
  border-collapse: collapse;
}

thead th {
   -moz-transform: rotate(-90deg);  /* FF3.5+ */
   -o-transform: rotate(-90deg);  /* Opera 10.5 */
   -webkit-transform: rotate(-90deg);  /* Saf3.1+, Chrome */
   filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=3);  /* IE6,IE7 */
   -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"; /* IE8 */
   vertical-align: top;
   padding: 15px 0;
} 
th {
  color: #666;
  font-weight: normal;
}
td, th {
  padding: 10px;
  text-align: center;
  border: solid 1px #999;
}


/* For aesthetics only */
				
body {
	margin: 40px;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
}
.intro h1 {
	font: 200 1.7em Segoe UI, "Segoe UI Light", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	font-weight: 200;
  color: #666;
}
.intro p {
	max-width: 600px;
}
.example {
  font-weight: bold;
}