Skip to content

Instantly share code, notes, and snippets.

@veganstraightedge

veganstraightedge/gist:172498

Created August 21, 2009 23:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save veganstraightedge/172498 to your computer and use it in GitHub Desktop.
Save veganstraightedge/172498 to your computer and use it in GitHub Desktop.
Download ZIP
Rotating text with CSS Transform does not change the layout. Ideas?
Raw
gistfile1.htm
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css" media="screen">
table { margin-top: 300px; }
th { background: #eee; }
th span {
background: red;
padding: .25em;
display: block;
margin-bottom: -1em;
/* non breaking spaces */
white-space: pre;
/* WebKit, Safari */
-webkit-transform-origin: top left;
-webkit-transform: rotate(-90deg);
/* Firefox 3.5+ */
-moz-transform-origin: top left;
-moz-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
</style>
</head>
<body>
<table>
<tr>
<th><span>This is a header</span></th>
<th><span>On its side</span></th>
<th><span>But the th is too wide</span></th>
</tr>
<tr>
<td>23</td>
<td>1</td>
<td>34.25</td>
</tr>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment